本文介绍了如何使用jQuery实现AJAX请求，将表单数据发送到do.php进行处理，并通过解析返回的JSON数据来获取并展示特定字段的值。适合初学者了解前端数据交互的基本流程。
common.js:
$(function(){
$('#submit').click(function(){
$.ajax({
type: "POST",
url: "do.php",
data: $('#myform').serialize(),
success: function(msg){
var obj = jQuery.parseJSON(msg);
alert(obj.data1+obj.data2+obj.data3+obj.data4+obj.data5+obj.data6+obj.data7);
}
});
})
})
do.php:
<?php
echo json_encode($_POST);
?>
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test jquery parse json</title>
<script src='jquery.js'></script>
<script src='common.js'></script>
</head>
<style>
form{ width:400px;background:#d4d4d4;margin:100px auto 0;}
form input[type='text']{ width:300px; }
form div{margin-bottom:20px;}
</style>
<body>
<form id='myform'>
<div>data1:<input type='text' name='data1' /></div>
<div>data2:<input type='text' name='data2' /></div>
<div>data3:<input type='text' name='data3' /></div>
<div>data4:<input type='text' name='data4' /></div>
<div>data5:<input type='text' name='data5' /></div>
<div>data6:<input type='text' name='data6' /></div>
<div>data7:<input type='text' name='data7' /></div>
<div><input type='button' id='submit' value='提交' /></div>
</form>
</body>
</html>
备注：访问index.html，往表单输入数据，点击提交即可看到效果……
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
