jQuery对AJAX的封装——$.ajax-优快云博客

php

<span style="font-size:18px;"><?php
header('Content-Type: text/plain');

//接收客户端提交的stuName、chinese、math
//执行SQL语句，保存入数据库中

$stuName = $_REQUEST['stuName'];
$chinese = $_REQUEST['chinese'];
$math = $_REQUEST['math'];

//连接数据库服务器
$conn = mysqli_connect('127.0.0.1', 'root', '', 'web1601');     //Improved 改进的
//向服务器提交SQL语句
$sql = 'SET NAMES UTF8';
<span style="color:#ff0000;">mysqli_query</span>($conn, $sql);
$sql = "INSERT INTO score VALUES(NULL,'$stuName','$chinese','$math')";
$result = mysqli_query($conn, $sql);

//INSERT语句的执行结果可能是
//   TRUE: 执行成功
//   FALSE: 执行失败
if($result){
	//echo 'SUCC';
	echo mysqli_insert_id($conn);  //返回刚刚执行的INSERT语句生成的自增编号
}else {
	//echo 'ERR';
	echo -1;
}

?></span>

html

<span style="font-size:18px;"><!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		.msg {
			display: none;
			border: 1px solid #3a3;
		}
	</style>
 </head>

 <body>
  <h1>jQuery对AJAX的封装——$.ajax</h1>
	
	<h3>成绩录入</h3>

	学生姓名：<input id="stuName"><br>
	语文成绩：<input id="chinese"><br>
	数学成绩：<input id="math"><br>
	<input id="btSave" type="button" value="保存记录">

	<br><br>
	<div class="msg">
		<h4>保存成功！</h4>
		<p>
			该记录在数据库的中的自增编号为：
			<span></span>
		</p>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$('#btSave').click(function(){
			var stu = {
				stuName: $('#stuName').val(),
				chinese: $('#chinese').val(),
				math: $('#math').val()
			};
			//发起AJAX请求，向服务器提交数据
			$.ajax({
				type: 'POST',
				url: '9-addscore2.php',
				data: stu,
				success: function(data){
					$('.msg span').text(data);
					$('.msg').fadeIn(1000);
					$('#stuName').val('');
					$('#chinese').val('');
					$('#math').val('');
				},
				error: function(){
					alert('AJAX请求-响应发生错误');
				}
			});
		});
	
		$(':input').focus(function(){
			$('.msg').fadeOut(1000);
		});
	</script>
 </body>
</html>
</span>