天天看點

使用jquery不重新整理前台頁面完成送出表單的例子

使用jquery不重新整理前台頁面完成送出表單的例子。 

前台檔案: 

使用jquery不重新整理前台頁面完成送出表單的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

<title>不重新整理頁面送出表單測試</title>  

</head>  

<body>  

<h1>不重新整理頁面送出表單測試</h1>  

<br />  

<input name="writer" id="writer" type="text" value="" />  

<input name="pass" id="pass" type="password" value="" />  

<input type="submit" name="submit" id="submit" value="送出" />  

</body>  

</html>  

使用jquery不重新整理前台頁面完成送出表單的例子

<script type="text/javascript" src="js/jquery.js"></script>  

<!-- 這裡不需要form,因為送出時call一個函數 -->  

<script type="text/javascript">  

$(document).ready(function(){// DOM的onload事件處理函數  

    $("#submit").click(function(){// 當按鈕submit被點選時的處理函數  

        postdata();// submit别點選時執行postdata函數  

    });  

});  

function postdata(){// 送出資料函數  

    $.ajax({// 調用jquery的ajax方法  

        type:"POST",// 設定ajax方法送出資料的形式  

        url:"ok.php",// 把資料送出到ok.php  

        /* 輸入框writer中的值作為送出的資料, 

         * 必須使用key/value的形式,如"key=value", 

         * 如果多個鍵值對,就使用&分隔開, 

         * 如"key1=value1&key2=value2" */  

        data: "writer="+$("#writer").val()+"&pass="+$("#pass").val(),  

        success:function(msg){// 送出成功後的回調,msg變量是ok.php輸出的内容  

                    alert("資料送出成功");// 如果有必要,可以把msg變量的值顯示到某個DIV元素中  

                    alert(msg);  

                }  

}  

</script>  

背景檔案: 

使用jquery不重新整理前台頁面完成送出表單的例子

<?php  

$writer=$_POST['writer'];  

$pass=$_POST['pass'];  

if(!emptyempty($writer)&&!emptyempty($pass)){  

    echo $writer.$pass."<br/>";  

}else{  

    echo "Empty!";  

?>  

本文轉自yunlielai51CTO部落格,原文連結:http://blog.51cto.com/4925054/1148418,如需轉載請自行聯系原作者