zoukankan      html  css  js  c++  java
  • PHP与ajax,无刷新表单提交

    前台文件:

    《===========================================

    input.html
    <script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script>    
    name:<input name="writer" id="writer" type="text" value="" /><br />    
    password:<input name="pass" id="pass" type="password" value="" />    
    <input type="submit" name="button" id="button" value="提交" />  
    <div id="msg"></div>
    <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: "bdcl.php",                                      //把数据提交到bdcl.php    
        data: "writer="+$("#writer").val()+"&pass="+$("#pass").val(),    //输入框writer中的值作为提交的数据    
        success: function(msg){                 //提交成功后的回调,msg变量是ok.php输出的内容。 
        x=document.getElementById("msg");
        x.innerHTML=msg;
         // alert(msg);                     //如果有必要,可以把msg变量的值显示到某个DIV元素中    
        }    
      });    
    }   
    </script> 

    ===========================================》

    后台文件:

    《===========================================

    bdcl.php
    <?php
    
    $writer=$_POST['writer'];
    
    $pass=$_POST['pass'];
    
    echo "name:".$_POST['writer'].",password:".$_POST["pass"].".";
    ?>

    ===========================================》

    功能:表单提交后,在当前页面显示后台处理文件返回的数据。

    需要jQuery支持。

  • 相关阅读:
    HDU-5818-Joint Stacks
    蓝桥杯-2016CC-卡片换位
    HDU-2255-奔小康赚大钱(KM算法)
    蓝桥杯-PREV31-小朋友排队
    crypto.js加密传输
    js之对象
    LigerUi之ligerMenu 右键菜单
    关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
    设置js的ctx
    AngularJS简单例子
  • 原文地址:https://www.cnblogs.com/hubery/p/3042424.html
Copyright © 2011-2022 走看看