JQuery无刷新提交表单的例子!

1>XML/HTML代码

 <script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script>
 
 <input name="username" id="username" type="text" value="" /> 
 <input name="pass" id="pass" type="password" value="" /> 
 <input type="submit" name="button" id="button" value="提交" />
 
 <!--这里不需要form,因为提交时call一个函数-->
 
 <script type="text/javascript">
 $(document).ready(function(){       //DOM的onload事件处理函数 
    $("#button").click(function(){   //当按钮button被点击时的处理函数 
      postdata();                    //button被点击时执行postdata函数 
    }); 
 }); 
 function postdata(){            //提交数据函数 
    $.ajax({                     //调用jquery的ajax方法 
      type: "POST",              //设置ajax方法提交数据的形式 
      url: "ok.php",             //把数据提交到ok.php 
      data: "username="+$("#username").val()+"pass="+$("#pass").val(),  //输入框username中的值作为提交的数据 
      success: function(msg){     //提交成功后的回调,msg变量是ok.php输出的内容。 
        alert("数据提交成功");    //如果有必要,可以把msg变量的值显示到某个DIV元素中 
      } 
    }); 
 } 

2> 后台文件:

<?php

require "config.php";

require "conn.php";

$username=$_POST['username'];

$pass=$_POST['pass'];

mysql_query("insert into user values(0,'$username','$pass')",$db);

//echo $_POST['username'];

?>

 

 </script>

你可能感兴趣的:(JavaScript,jquery,PHP,Ajax,mysql)