ajax 表单提交 无刷新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录angularJS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/login.css" />
        <script type="text/javascript" src="js/jquery-1.8.1.js"></script>
        <script type="text/javascript">
$(document).ready(function(){       //DOM的  
    $("#button").click(function(){   //当按钮button被点击时的处理函数  
      postdata();                    //button被点击时执行postdata函数  
    });  
 });  
 function postdata(){            //提交数据函数  
    $.ajax({                     //调用jquery的ajax方法  
      type: "POST",              //设置ajax方法提交数据的形式  
      url: "ajax_output.php",             //把数据提交到ok.php  
      data: "username="+$("#username").val()+"&pass="+$("#pass").val()+"&age="+$("#age").val(),  //输入框username pass age 多个值时用&符号中的值作为提交的数据  
      success: function(msg){     //提交成功后的回调,msg变量是ok.php输出的内容。  
        alert("数据提交成功");    //如果有必要,可以把msg变量的值显示到某个DIV元素中  
      }  
    });  
 }  


        </script>
    </head>
    <body>
        <div class="container">
            <div class="img-responsive" id="msg"></div>
            <form class="form-signin" id= "form1" method="post" name="user_info" action="">
                <h2>Please sign in</h2>
                    <input name="username" id="username" type="text" value="" />  
                     <input name="pass" id="pass" type="text" value="" />  
                     <input name="age" id="age" type="text" value="" />
                     <input type="submit" name="button" id="button" value="提交" />
            </form>
        </div>
    </body>

</html>


<?php
    header("content-type:text/html;charset=utf-8");
/* $mysql_username="localhost"; // 连接数据库用户名
    $mysql_password=""; // 连接数据库密码*/
    $mysql_database="test"; // 数据库的名字
    
    // 连接到数据库
   $conn = mysql_connect('localhost','root','') or die("MYSQL_connect:".mysql_errno());
    mysql_select_db($mysql_database);
    $username=$_POST['username'];
    $pass=$_POST['pass'];
    $age=$_POST['age'];
    $sql = "INSERT INTO `login2` VALUES ('$username','$pass','$age')";
    $query = mysql_query($sql);
   if($query){
        echo '1';
    }else{
        echo '注册失败!';
        }

?>

你可能感兴趣的:(Ajax,表单提交,无刷新)