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支持。

  • 相关阅读:
    Android自动化测试中如何处理各种弹窗
    产品经理的私房菜
    Java基础——ArrayList方法全解(字典版)
    ESP8266 WIFI杀手汉化教程 &烧录
    c语言数据拼包
    阿里开源Java诊断工具--Arthas入门
    Java并发包9--Future接口简介
    官宣|VS Code 1.59 发布!Terminal 可以跨窗口移动了!
    微软内推常见问题 Q&A
    03-Numpy库
  • 原文地址:https://www.cnblogs.com/hubery/p/3042424.html
Copyright © 2011-2022 走看看