首页 > 代码库 > jQuery 中 ajax 提交数据应用的一个小demo
jQuery 中 ajax 提交数据应用的一个小demo
举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ...
ajax02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="form">
<p>用户名 <input type="text" name="username" id="username"></p>
<p>密 码 <input type="password" name="password" id="password"></p>
<p> <input type="button" value="http://www.mamicode.com/ajax提交" id="btn"> </p>
</div>
</body>
</html>
<script src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
//点击提交按钮那么执行 ajax 操作
$(‘#btn‘).click(function(){
/* 获取要提交到服务器的数据也就是 每个表单的值 ，使用对象的方式来保存，
如果是表单比较多的时候那么这时候我们可以用到jquery的一个方法来帮我们实现表单序列化： var data= http://www.mamicode.com/$("#form").serialize(); 如果使用了serialize 这个方法那么请把 div 改成 form 元素这样才能实现功能 */
var data = http://www.mamicode.com/{"username":$(‘#username‘).val(),"password":$(‘#password‘).val()};
$.ajax({
//目标文件
url:‘ajax02.php?t=‘+Math.random(),
//使用post来提交数据
type:‘POST‘,
//要提交的数据
data:data,
//如果提交成功的话，那么则弹出提交成功提示
success:function(){
alert(‘提交成功!‘);
}
})
});
//ajax发送的时候如果有错误的话那么执行错误提示！
$(document).ajaxError(function() {
alert(‘发送失败!!!!!!‘);
});
});
</script>
ajax02.php
<?php
//利用打印方式来查看是否数据已经提交成功
print_r($_POST);
?>
在谷歌浏览器的控制台上查看数据是否已经接收
