Jquery+ajax+php實現簡單的非同步提交
阿新 • • 發佈：2019-02-04
jqueryTest.html 檔案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery例項</title> </head> <script language="javascript" src="jquery.js"></script> <script language="javascript"> $(document).ready(function(){ $('#send_ajax').click(function (){ var username = $('#input1').val(); var age = $('#input2').val(); if (username == '') { $('#result').html('<font color="red">帳號為空</font>'); $('#send_ajax').attr('disabled','');//不好用 return false; } if (age == '') { $('#result').html('<font color="red">年齡為空</font>'); $('#send_ajax').attr('disabled',''); return false; } var params = $('input').serialize(); //序列化表單的值 $.ajax({ url:'lzwTest.php', //後臺處理程式 type:'post', //資料傳送方式 dataType:'json', //接受資料格式 data:params, //要傳送的資料 success:update_page//回傳函式(這裡是函式名字) }); }); //post()方式 $('#test_post').click(function (){ $.post( 'lzwTest.php', { username:$("#input1").val(), age:$("#input2").val(), sex:$("#input3").val(), job:$("#input4").val() }, function (data) { //回撥函式 var myjson=''; eval('myjson=' + data + ';'); $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']); } ); }); //get()方式 $('#test_get').click(function (){ $.get( 'lzwTest.php', { username:$("#input1").val(), age:$("#input2").val(), sex:$("#input3").val(), job:$("#input4").val() }, function (data) { //回撥函式 var myjson=''; eval('myjson=' + data + ';'); $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']); } ); }); }); function update_page(json) { //回傳函式實體，引數為XMLhttpRequest.responseText var str="姓名:"+json.username+"<br />"; str+="年齡:"+json.age+"<br />"; str+="性別:"+json.sex+"<br />"; str+="工作:"+json.job+"<br />"; str+="追加測試:"+json.append; $("#result").html(str); } </script> <body> <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> <form id="formtest" action="" method="post"> <p><span>輸入姓名: </span><input type="text" name="username" id="input1" /></p> <p><span>輸入年齡: </span><input type="text" name="age" id="input2" /></p> <p><span>輸入性別: </span><input type="text" name="sex" id="input3" /></p> <p><span>輸入工作: </span><input type="text" name="job" id="input4" /></p> </form> <input type="submit" name="send_ajax" id="send_ajax" value="提交" /> <button id="test_post">POST提交</button> <button id="test_get">GET提交</button> </body> </html>
lzwTest.php 檔案：
<?php
if (!empty($_POST)) {
$data = $_POST;
print json_encode($data);
}
?>
填寫表單資料提交：
