1.submit.php
<?php
$arr = $_POST;
$arr['msg']=1;
//echo $_POST['uname'];
echo json_encode($arr);
?>
2.index.html
<html>
<head>
<meta charset="utf-8">
<title>Ajax表单提交插件jquery form</title>
<script type="text/javascript" src="jquery.form.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var options = {
// target: '#output', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
resetForm: true,
dataType: 'json'
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#my_form').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
var uname = $("#uname").val();
if(uname==""){
$("#msg").html("姓名不能为空！");
return false;
}
var age = $("#age").val();
if(age==""){
$("#msg").html("岁数不能为空！");
return false;
}
$("#msg").html("正在提交...");
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
$("#msg").html('提交胜利');
var sex = responseText.sex==1?"男":"女";
$("#output").html("姓名："+responseText.uname+" 性别："+sex+" 岁数："+responseText.age);
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
//alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
// '\n\nThe output div should have already been updated with the responseText.');
}
</script>
</head>
<body>
<form id="my_form" action="submit.php" method="post">
<p>姓名：<input type="text" name="uname" id="uname" class="input"></p>
<p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="2"> 女 </p>
<p>岁数：<input type="text" name="age" id="age" class="input" style="width:50px"></p>
<p style="margin-left:30px"><input type="submit" class="btn" value="提交"><span id="msg"></span></p>
</form>
div id="output"></div>
</body>
</html>
