js 中的submit 回撥函式

fengxiuping發表於2014-06-18
JSMIT函式

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

相關文章