zoukankan      html  css  js  c++  java
  • Ajax的post方式提交数据

    最新需要学习如何使用 POST 提交方法的接口,正好看到了Ajax 版本的感觉不错分享给大家,欢迎高手指点。

    <SCRIPT LANGUAGE=”javascript”>

    <!–      

    function saveUserInfo()
    {
        //获取接受返回信息层
        var msg = document.getElementById(”msg”); 

        //获取表单对象和用户信息值
        var f = document.user_info;     
        var userName = f.user_name.value;
        var userAge = f.user_age.value;
        var userSex = f.user_sex.value;

        //接收表单的URL地址
        var url = “commit.php”;     
        //需要POST的值,把每个变量都通过&来联接 
        var postStr = “name=”+ userName +”&age=”+ userAge +”&sex=”+ userSex;

        //实例化Ajax
        var ajax = null;
        if(window.XMLHttpRequest){
            ajax = new XMLHttpRequest();
           }
        else if(window.ActiveXObject){
            ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
           }
        else{
            return;
           }

        //通过Post方式打开连接
        ajax.open(”POST”, url, true);  
        //定义传输的文件HTTP头信息 
        ajax.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”); 
        //发送POST数据
        ajax.send(postStr);

        //返回数据的处理函数
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4 && ajax.status == 200){
                   msg.innerHTML = ajax.responseText;
                }
          }
    }

     –>
    </SCRIPT>

    <form name=”user_info”>
         姓名:<input type=”text” name=”user_name” /><br/>
         年龄:<input type=”text” name=”user_age” /><br/>
         性别:<input type=”text” name=”user_sex” /><br/>
    <input type=”button” value=”提交表单” onClick=”saveUserInfo()”>
    </form>

    //构建一个接受返回信息的层:
    <div id=”msg”></div>

    :
    与get方法比较,post方法可传输大于2K的数据,在Ajax里的应用不同之处在于:”post方法的请求地址与传输的数据是放在两个对象里—-请求地址放在open对象里,传输的数据放在send对象里;并且在传输数据之前定义一个传输文件HTTP头信息(setRequestHeader)”
    在commit.php文件里可以用变量$_POST[’name’] ,  $_POST[’age’],    $_POST[’sex’]获得send对象传输的数据.并对数据库进行操作.

  • 相关阅读:
    JDBC的初步了解及使用
    HTML+CSS的小实例
    java接口与抽象类
    java类的继承(基础)
    java中求质数(素数)的问题
    对HTML5标签的认识(四)
    对HTML5标签的认识(三)
    对HTML5标签的认识(三)
    SublimeText2 快捷键一览表
    Node开发项目管理工具 Grunt 对比 Gulp
  • 原文地址:https://www.cnblogs.com/bruceli-net/p/4709811.html
Copyright © 2011-2022 走看看