• 利用XMLHTTP无刷新添加数据之Post篇


     

    利用XMLHTTP无刷新添加数据之Post篇.

    前两篇主要写了从获取数据.接下来,我们讲讲如何添加数据.
    我们传统的提交数据的方法都是用<Form>来实现的.
    <Form>标记中的Method属性确定了表单元素的数据在发送到服务器时,
    如何对HTTP请求信息进行打包.

    Method 属性可以使用的方法
    Method属性      发送表单元素的方式                            读取数据的Request集合
    Get             标识在URL的最后                                  QueryString
    Post            在HTTP请求的主体内(HTTP请求的自由区域)  Form


    这篇文章用XMLHTTP来实现Form的Method=Post.


    ClientPost.htm

    <script language="JavaScript">
    function AddDataPost(sUserId,sUserName)
    {
    /*
     *--------------- AddDataPost(sUserId,sUserName) -----------------
     * AddDataPost(sUserId,sUserName)
     * 功能:通过XMLHTTP添加数据.相当于Form的Method=Post.
     * 参数:sUserId,字符串,发送条件.
     * 参数:sUserName,字符串,发送条件.
     * 实例:AddDataPost(document.all.userid.value,document.all.username.value);
     * author:wanghr100(灰豆宝宝.net)
     * update:2004-5-30 14:46
     *--------------- AddDataPost(sUserId,sUserName) -----------------
     */

        var oBao = new ActiveXObject("Microsoft.XMLHTTP");
        //特殊字符:+,%,&,=,?等的传输解决办法.
        //Update:2004-6-1 12:22
        //escape(sUserId),escape(sUserName);

        sUserId = escape(sUserId);
        sUserName = escape(sUserName);
        var userInfo = "userid="+sUserId+"&username="+sUserName;
        oBao.open("POST","Server.asp",false);
        oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        oBao.send(userInfo);
        //清空输入框数据.
        document.all.userid.value="";
        document.all.username.value="";
        //服务器端处理返回的是经过escape编码的字符串.
        alert(unescape(oBao.responseText))
    }
    </script>
    <input type="button" onclick="AddDataPost(document.all.userid.value,document.all.username.value)" value="AddDataPost"><br>
    userid:<input type="text" name="userid"><br>
    username:<input type="text" name="username">

     

    Server.asp  服务器端处理.

    <% @Language="JavaScript" %>
    <%
    function OpenDB(sdbname)
    {
    /*
     *--------------- OpenDB(sdbname) -----------------
     * OpenDB(sdbname)
     * 功能:打开数据库sdbname,返回conn对象.
     * 参数:sdbname,字符串,数据库名称.
     * 实例:var conn = OpenDB("database.mdb");
     * author:wanghr100(灰豆宝宝.net)
     * update:2004-5-12 8:18
     *--------------- OpenDB(sdbname) -----------------
     */

        var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
        var conn = Server.CreateObject("ADODB.Connection");
        conn.Open(connstr);
        return conn;
    }
    var sResult = "";
    var oConn = OpenDB("data.mdb");
    //相当于Form的Method=Post.
    //相当于Form的Method=Post.
    //特殊字符:+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
    //所以服用器端应该先unescape解码.
    //Update:2004-6-1 12:22
    //unescape(Request.Form("userid")).....
    var userid = unescape(Request.Form("userid"));
    var username = unescape(Request.Form("username"));

    sResult = "userid:"+userid+"\nusername:"+username+"\n 添加成功."
    var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
    oConn.Execute(sql);
    Response.Write(escape(sResult));
    %>


    数据库设计
    data.mdb
    表users.
    字段
    id              自动编号
    userid          文本
    username        文本

    表:users 数据:
    id      userid          username
    1       wanghr100       灰豆宝宝.net

  • 相关阅读:
    CF Round #576 (Div. 2) Matching vs Independent Set
    Count on a tree
    2019hdu多校 AND Minimum Spanning Tree
    Pku2978 Colored stones
    2019hdu多校 Minimal Power of Prime
    微信小程序- app.wxss 全局样式与局部样式
    微信小程序-选择器
    微信小程序-视图层-样式导入和全局样式
    微信小程序视图层-rpx
    视觉上的透明效果
  • 原文地址:https://www.cnblogs.com/weiweictgu/p/354011.html
Copyright © 2020-2023  润新知