ajax无刷新表单提交

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax无刷新表单提交相关的知识，希望对你有一定的参考价值。

ajax无刷新提交笔记

数据库自己模拟建一个 执行一下添加功能

php部分采用pdo方法：

<?php
$db =‘mysql‘;
$host =‘localhost‘;
$port =‘3306‘;
$dbname = ‘ajax‘;
$user = ‘root‘;
$pwd  = ‘‘;

$dsn = "$db:host=$host;port=$port;dbname=$dbname";  

 //设定字符集 
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND=>‘SET NAMES \‘UTF8\‘‘); 

$pdo = new PDO($dsn,$user,$pwd,$options);

$name = $_POST[‘name‘];
//print_r ($name);exit;
$pwd  = $_POST[‘pwd‘];
$code  = $_POST[‘code‘];
$sql = "insert into user (name,pwd,code) values (‘".$name."‘,‘".$pwd."‘,‘".$code."‘)";

$res=$pdo->exec($sql);  

if ($res){
   echo 1;
   exit;
}else{
   echo 2;
   exit;
}

ajax前端部分

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(function(){

            $(".user_main_r button").click(function(){
            
          
             $.post(‘./login.php‘, $(‘form‘).serialize(), function(data) { 
               
                if(data == 1){
                   alert (‘添加成功‘);
                     $("#admin_user").val(‘‘);
                     $("#admin_psd").val(‘‘);
                     $("#captcha").val(‘‘);
                }else{
                   alert (‘添加失败‘);
                }      
            
            });
            
            });
        
        });

               
         
         
        </script>

        <title>无刷新用户登录</title>

    </head>
    <body id="userlogin_body">
     

                    <form id="form" method="post" >
                        <ul>
                     
                                <div class="user_main_box">
                                    <ul>
                                        <li class="user_main_text">用户名： </li>
                                        <li class="user_main_input">
                                            <input id="admin_user" name="name" maxlength="20" /> 
                                            
                                   </li>
                                   </ul>

                                    <ul>
                                        <li class="user_main_text">密&nbsp;&nbsp;&nbsp;&nbsp;码： </li>
                                        <li class="user_main_input">
                                            <input class="TxtPasswordCssClass" id="admin_psd" name="pwd" type="password">
                                            
                                        </li>
                                    </ul>
                                    <ul>
                                        <li class="user_main_text">身份证： </li>
                                        <li class="user_main_input">
                                            <input class="TxtValidateCodeCssClass" id="captcha" name="code" type="text">
                                                                       
                                        </li>
                                    </ul>
                                    
                                </div>
                            </li>
                            <li class="user_main_r">

                                <button  type="button" >提交</button>
                            </li>
                        </ul>
                    </form>
           
    </body>


本文出自 “kangjunfei” 博客，转载请与作者联系！

以上是关于ajax无刷新表单提交的主要内容，如果未能解决你的问题，请参考以下文章

jquery如何实现form提交无刷新返回一个页面

js实现无刷新表单提交文件，将ajax请求转换为form请求方法

使用iframe实现页面无刷新提交表单

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

jQuery实现form表单基于ajax无刷新提交方法详解

AJAX PHP无刷新form表单提交的简单实现(推荐)