您的位置：首页 > Web前端 > JQuery

jQuery对AJAX的封装——$.ajax

2016-04-11 22:59 453 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航