js 中的submit 回调函数 - 走看看

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+"&nbsp;性别："+sex+"&nbsp;年龄："+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 + '

responseText: 
' + responseText + 
    //    '

The 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="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>