Ajax传值问题

最新推荐文章于 2024-05-14 13:45:43 发布

不放弃的LMQ

最新推荐文章于 2024-05-14 13:45:43 发布

阅读量475

点赞数

分类专栏： AJAX

本文链接：https://blog.youkuaiyun.com/a_asdfgh/article/details/53215423

版权

AJAX 专栏收录该内容

2 篇文章

订阅专栏

这条博客是我自己写AJAX是遇到的问题

首先是贴出全部的代码：

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebandAJAX.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登陆</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
            font-size:16px;
        }
        #main{
            width:500px;
            height:500px;
            margin:100px auto;
            border:1px solid black;
            text-align:center;
            padding-top:50px;
        }
        #main>button{
            margin:20px auto;
            margin-left:20px;
        }
    </style>
    <script type="text/javascript">
        function Login() {

        //创建HTTP请求对象
        //
        var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      // alert(document.getElementById('userName').value);
        //如果是GET请求
        //第一个参数：GET/POST  第二个参数：url    第三个参数：true-异步  false-同步     
        //
        req.open('GET', '../Handler/Handler1.ashx?userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value, true);
       // req.open('GET', '../Handler/Handler1.ashx?userName=123&userPwd=123', true);
        req.send(null);

        //如果是POST请求
        //req.open('POST', '../Handler/Handler1.ashx', true);
        //req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //req.send('userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value);

        //接受AJAX响应:发送AJAX请求后，我们要能接收HTTP响应，这是通过XMLHttpRequest的实例
        //注册回调函数完成的。并通过XMLHttpRequest对象的responseText属性或responseXML属性
        //来获取响应消息的内容。代码如下：

        //HTTP响应的处理
        //
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                alert("结果是：" + req.responseText);

            }

        };


        }

        function GetInfo() {
            alert("fljsafk");
            setInterval(function () {

             var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
               req.open('POST', '../Handler/Handler2.ashx?', true);
               req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               req.send('testh=haha');//这里面不可以有空格


               req.onreadystatechange = function () {
                   if (req.status == 200 && req.readyState == 4) {
                       alert("响应的结果是：" + req.responseText);
                   }
               };
            }, 2000);
            alert("结束");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
         用户名：<input type="text" name =" userName" id="userName" placeholder ="请输入用户名 " /><br /><br />
         密   码：<input type ="password"name ="userPwd" id="userPwd" placeholder =" 请输入密码" /><br />
         //至于这个为什么加false，我也不明白
        <button onclick="Login();return false;">登陆</button><button onclick="GetInfo();return false;">POST方法按钮</button>
        <input type="text" id="showInfo"/>
         <asp:Button ID="Button1" runat="server" Height="30px" OnClick="Button1_Click" Text="Button" />
    </div>
    </form>
</body>
</html>

拆分出其中的POST方法：

function GetInfo() {
            alert("fljsafk");
            setInterval(function () {

             var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
               req.open('POST', '../Handler/Handler2.ashx?', true);
               //这个地方和GET方法不一样
               req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                //这个地方一定要注意，因为你传过去，编译器会把空格也带上，所以你的接受方参数一旦忘记写上空格，那么就会报异常了
                //这个地方也不一样
               req.send('testh=haha');//这里面不可以有空格

               req.onreadystatechange = function () {
                   if (req.status == 200 && req.readyState == 4) {
                       alert("响应的结果是：" + req.responseText);
                   }
               };
            }, 2000);
            alert("结束");
        }

拆分出其中的GET方法：

   function Login() {

        //创建HTTP请求对象
        //
        var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      // alert(document.getElementById('userName').value);
        //如果是GET请求
        //第一个参数：GET/POST  第二个参数：url    第三个参数：true-异步  false-同步     
        //
        req.open('GET', '../Handler/Handler1.ashx?userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value, true);
       // req.open('GET', '../Handler/Handler1.ashx?userName=123&userPwd=123', true);
        req.send(null);

        //如果是POST请求
        //req.open('POST', '../Handler/Handler1.ashx', true);
        //req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //req.send('userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value);

        //接受AJAX响应:发送AJAX请求后，我们要能接收HTTP响应，这是通过XMLHttpRequest的实例
        //注册回调函数完成的。并通过XMLHttpRequest对象的responseText属性或responseXML属性
        //来获取响应消息的内容。代码如下：

        //HTTP响应的处理
        //
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                alert("结果是：" + req.responseText);

            }

        };

        //Session["jfdsja"] = "我是session";
        }

GET方法的接收代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebandAJAX
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string userName = context.Request.QueryString["userName"].ToString();
            string userPwd = context.Request.QueryString["userPwd"].ToString();

            string result = string.Empty;

            if (userName=="admin"&&userPwd=="123")
            {
                result = "登陆成功";
                context.Response.ContentType = "text/plain";
                context.Response.Write(result);
                return;
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("登陆失败");//write的参数就是你要传给请求方的数据


        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

POST的接收代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebandAJAX.Handler
{
    /// <summary>
    /// Handler2 的摘要说明
    /// </summary>
    public class Handler2 : IHttpHandler
    {       
        public void ProcessRequest(HttpContext context)
        {         
            string test = context.Request["testh"].ToString();    
            string result = string.Empty;
            if (!string.IsNullOrEmpty(test))
            {
                result = "success";
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write(result);
       }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

以上就是全部代码，刚学写的比较乱啊，好多代码该怎么写，写在哪个文件里面，还不是理解，敬请见谅啊，后期会持续更改，如有不足请指正！谢谢大家！

我最想讲的就是：POST方法send传值得时候，里面的参数（空格是算的），比如：
req.sed(“name = haizi”);
平常我们都喜欢在里面加上空格，看起来好看，但是了当你在服务端接收的时候就要注意了：
req.context.Request.Form[“name”];这样是会出现异常的，因为你么有加上那个空格
req.context.Request.Form[“name “];这样才正确