ajax 异步无刷新

无聊时写的一个小案例，希望有所帮助，话不多说，上代码，ajax基本对象，请求方式我就不说了，百度可以搜到。

原生ajax:

<title>ajax案例</title>
 <script type="text/javascript">
        var xmlHttp = null;
        //实力化xmlhttprequest对象
        function loadxmlhttprequest() {
            //判断是不是标准浏览器
            if (window.ActiveXObject) {//ie浏览器
                xmlHttp = new XMLHttpRequest("Microsoft.XMLHTTP");
            }
            //不是ie浏览器 (标准浏览器  谷歌  火狐)
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }
        //使用ajax发送请求
        function SendMessage()
        {
            //实例化对象
            loadxmlhttprequest();
            //获取要发送的请求
            var mess = "text=" + document.getElementById("textone").value;
            //请求地址
            var address = "ajaxhandler.ashx";
            //请求方式
            var mod = "Get";
            //发送数据
            xmlHttp.open(mod, address + "?" + mess);
            xmlHttp.send();
            //判断数据是否发送成功以及是否有回发数据
            xmlHttp.onreadystatechange = function () {
                //请求是否正常发送
                if(xmlHttp.readyState==4)
                {
                    //判断是否回发正常
                    if (xmlHttp.status = 200)
                        //将接收到的结果赋值给div
                        document.getElementById("res").innerText = xmlHttp.responseText;
                }
            }
        }
    </script>
</head>
<body>   
    <form id="form1" runat="server">
        <div>         
            <input  name="textone"id="textone" onblur="SendMessage()"/>
        </div>
        <div id="res"></div>//将数据显示在div中
    </form>
</body>
</html>

接下来是一般处理程序里的代码，注：一般处理程序名为 ajaxhandler

    public void ProcessRequest(HttpContext context)
        {
            string str = context.Request["text"].ToString();
            context.Response.Write("我已接收到你的请求，你请求的信息是" + str);
        }

 不多说，关于AJAX的基本大家百度可以找到，我就直接上代码了。

MVC 中，jquery的ajax(不要忘了引用jquery包)：

<input value="ajax" type="button" id="btndx" />
<input value="ajax" type="button" onclick="btnajax()" />

<script type="text/javascript">
 function btnajax() {
        $.ajax({
            type: 'get',//请求方式
            url: '/Verification/getVerifyCode',//请求路径
            data: { "phone": $("#btndx").val() },//传递参数
            success: function (data) {//返回结果
               if(data.result)
                {
                alter("成功！");
                }
               else{
                 alter("失败！");
                }
            } 
      }) 
}
 </script >

 后台:

public JsonResult getVerifyCode(string phone) {
         bool result=false;
         if(phone==1) 
           { result=true; } 
          return Json(result=result}, JsonRequestBehavior.AllowGet); 
}

 

　　

posted @ 2017-08-14 15:06  木子丶  阅读(1550)  评论(0)  编辑  收藏  举报