AJAX实现页面无刷新发表评论（post请求，服务器端使用php）

接受评价的表单所在的页面代码：

index.PHP

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"/>
<title>index</title>
<script type="text/javascript">
function postCCInsert()
{
// 创建XMLHttpRequest对象
var xmlhttp;
if (parent_word.length==0 || c_etymology.length == 0)
  { 
  return;
  }
if (window.XMLHttpRequest)
  {// IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 创建url，因为这个处理评价内容的PHP文件和这个接受评价的文件处在同一个文件夹，所以直接用文件名就行
var url = "comment.PHP";
  //打开连接
xmlhttp.open("POST",url,true);

var username = document.getElementById("userid").value;
var comment = document.getElementById("commentid").value;
// 不同参数之间用&连接，"username="里的username和"&comment="里的comment必须和表单里对应的输入框
// 名称必须一致
var postStr ="username=" + username + "&comment=" + comment;
// 这个添加头的语句对post方法传递参数来说是必须的，不然的话会出错
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 传递参数
xmlhttp.send(postStr);
// 验证请求是否成功
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
	  // 把评价添加到网页所
	  document.getElementById("user_id").innerHTML=user_id;
	  document.getElementById("comment_id").innerHTML=comment_id;
  }
}
}
</script>
</head>
<body>
<p>网页文字</p>

<!-- 用于显示评价的标签 -->
<p id = "user_id"></p>
<p id = "comment_id"></p>

<form>
用户名：
<input type='text' id = 'userid' name='username' />
<br/>
评论：
<textarea id = "commentid"  name = "comment" rows='5' cols='81'></textarea>
<input type="button" onclick="postCCInsert()" value='提交'>  
</form>

</body>
</html>

运行这个文件的代码后出现下面图片中样子：

点击“提交”之后，就把评价的内容交给comment.PHP处理。comment.PHP仅仅把评价保存到数据库中，而且comment.PHP这个页面并不会弹出，只是在后台处理，依旧停留在index.PHP 页面上。下面是comment.PHP的代码：

<?PHP
// 把数据存入数据库表中
$conn = MysqL_connect ( "localhost:3306","数据库用户名","数据库密码" );
if (! $conn) {
	echo "Failed to connect";
}
MysqL_select_db ( "dictionary",$conn );
$username = $_POST["username"];
$comment = $_POST['comment'];
// 表就两列，一列保存的是用户名，另一列保存评价
$sql = "INSERT INTO tablename VALUES (\"$username\",\"$comment\")";
MysqL_query ( $sql );
MysqL_close ( $conn );
?>

原文链接：https://www.f2er.com/ajax/163974.html

AJAX实现页面无刷新发表评论（post请求，服务器端使用php）

猜你在找的Ajax相关文章