使用jquery不刷新前台页面完成提交表单的例子。
前台文件：
后台文件：
前台文件：
Html代码
- <!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>
Js代码
- <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>
后台文件：
Php代码
- <?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
，如需转载请自行联系原作者
