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 + \'\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>

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hijci0j0b1j