• Ajax使用Post方式提交到.aspx页面交互的例子


    有时间调试了Ajax使用Post方式提交到.aspx页面交互的过程,下面是例子:
    /**********************************客户端代码*****************************************************************/
    1、使用XMLHttpRequest直接post到.aspx页面
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>无标题页</title>

        
    <script type="text/javascript">
                
    //创建XMLHttpRequest对象
                function getXMLhttpRequest(){
                    
    var xmlhttp;
                    
    if (window.XMLHttpRequest) {
                        xmlhttp 
    = new XMLHttpRequest();
                        
    if (xmlhttp.overrideMimeType) {
                            xmlhttp.overrideMimeType(
    "text/xml");
                        }

                    }

                    
    else 
                        
    if (window.ActiveXObject) {
                            
    var activeName = ["MSXML2.XMLHTTP""Microsoft.XMLHTTP"];
                            
    for (var i = 0; i < activeName.length; i++{
                                
    try {
                                    xmlhttp 
    = new ActiveXObject(activeName[i]);
                                    
    break;
                                }
     
                                
    catch (e) {
                                
                                }

                            }

                            
                        }

                    
    return xmlhttp;
                }

                
    var xmlhttp;
                
    function postClick(){
                    
    //定义发送字符串
                    //var xmldoc="<?xml version='1.0' encoding='utf-8' ?><UserInfo><User><UserName>小李</UserName><UserSex>男</UserSex><UserTel>123</UserTel><UserEmail>fdsfds@126.com</UserEmail></User><User><UserName>小林</UserName><UserSex>男</UserSex><UserTel>145</UserTel><UserEmail>xiaolin@126.com</UserEmail></User></UserInfo>";
                    //var xmldoc="fdsf";
                    var xml="<?xml version=\"1.0\" encoding=\"utf-8\" ?><UserInfo><User><UserName>小李</UserName><UserSex>男</UserSex><UserTel>123</UserTel><UserEmail>fdsfds@126.com</UserEmail></User><User><UserName>小林</UserName><UserSex>男</UserSex><UserTel>145</UserTel><UserEmail>xiaolin@126.com</UserEmail></User></UserInfo>";
                    
    var xmldoc=new ActiveXObject("MSXML2.DOMDocument");
                    xmldoc.loadXML(xml);
                    
    //创建XMLHttpRequest对象
                    xmlhttp = getXMLhttpRequest();
                    
    //初始化
                    //xmlhttp.open("POST", "PostHandler.ashx", true);//发送给.ashx数据可以被接收到
                    xmlhttp.open("POST""jQueryPostServer.aspx"true);//此处直接发送到.aspx去接收

                    
    //设置头
                    xmlhttp.setRequestHeader("Content-Length",xmldoc.length);
                    
    //设置头信息
                    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");//使用post发送,此句必不可少

                    
    //指定回调函数
                    xmlhttp.onreadystatechange = onReadyStateChange;//onreadystatechange要放在setRequestHeader之后
                    //发送
                    //xmlhttp.send("xml="+xmldoc);
                    xmlhttp.send(xmldoc);
                }

                
                
    // 回调函数
                function onReadyStateChange()
                
    {
                    
    if (xmlhttp.readyState == 4)
                    
    {
                        
    if (xmlhttp.status == 200)
                        
    {
                            
    //alert(xmlhttp.responseText);
                            document.getElementById("text").innerHTML = 
                                xmlhttp.responseText;
                        }

                    }

                }

        
    </script>

    </head>
    <body>
        
    <input type="button" id="post" value="提交" onclick="postClick()" />
        <div id="text">
        
    </div>
    </body>
    </html>
    2、使用jquery类库post到.aspx页面
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>使用jquery发送</title>

        
    <script type="text/javascript" src="js/jquery.js"></script>

        
    <script type="text/javascript">
                
    function postClick(){

                    
    //发送一个xml文档
                    var xml="<?xml version=\"1.0\" encoding=\"utf-8\" ?><UserInfo><User><UserName>小李</UserName><UserSex>男</UserSex><UserTel>123</UserTel><UserEmail>fdsfds@126.com</UserEmail></User><User><UserName>小林</UserName><UserSex>男</UserSex><UserTel>145</UserTel><UserEmail>xiaolin@126.com</UserEmail></User></UserInfo>";
                    
    var xmldoc=new ActiveXObject("MSXML2.DOMDocument");
                    xmldoc.loadXML(xml);
                    
    //发送字符串
                    //var xmldoc="测试数据,post异步提交"
                    //xmldoc = 'name=' +xmldoc;
                    $.ajax(
                        type:
    "POST",
                        url:
    "jQueryPostServer.aspx"
                        processData:
    false,//当发送字符串时设为true,当发送文档对象时设为false
                        data:xmldoc, 
                        async:
    true,
                        beforeSend:beforeFun,
                        success:onReadyStateChange,
                        error:errorFun,
                        timeout:
    5000
                    }
    );

                }

                
    //发送前函数
                function beforeFun(){
                    $(
    "#text").html("loading");
                }

                
    // 回调函数
                function onReadyStateChange(returnValue)
                
    {
                    
    //alert(returnValue);
                    $("#text").html(returnValue+"交互成功!!");
                }

                
    //错误信息
                function errorFun()
                
    {
                    $(
    "#text").html("数据加载错误");
                }

        
    </script>

    </head>
    <body>
        
    <div>
            
    <input type="button" id="post" value="提交" onclick="postClick()" />
            <div id="text">
            
    </div>
        </div>
    </body>
    </html>

    /**********************.aspx后台代码*******************************************************************************/
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    public partial class jQueryPostServer : System.Web.UI.Page
    {
        
    protected void Page_Load(object sender, EventArgs e)
        
    {
            
    //清除缓存
            Response.Buffer = true;
            Response.ExpiresAbsolute 
    = DateTime.Now.AddDays(-1);
            Response.Cache.SetExpires(DateTime.Now.AddDays(
    -1));
            Response.Expires 
    = 0;
            Response.CacheControl 
    = "no-cache";
            Response.Cache.SetNoStore();

            Response.ContentType 
    = "text/plain";
            
    string PostSend = string.Empty;
            
    //当发送的是一个字符串时
            
    //当发送的是一个XML文档对象时

            
    //打印出UserName
            Response.Write(PostSend);
        }

    }

  • 相关阅读:
    标准C语言(9)
    标准C语言(8)
    标准C语言(7)
    标准C语言(6)
    标准C语言(5)
    标准C语言(4)
    标准C语言(3)
    标准C语言(1)
    Linux基础
    Kafka 学习笔记之 Kafka0.11之console-producer/console-consumer
  • 原文地址:https://www.cnblogs.com/xnxylf/p/1534982.html
Copyright © 2020-2023  润新知