Day02Ajax post请求

最新推荐文章于 2021-08-05 16:06:51 发布

ZZZ___bj

最新推荐文章于 2021-08-05 16:06:51 发布

阅读量397

点赞数

分类专栏： ajax javaweb 文章标签： ajax 异步 xmlhttprequest

本文链接：https://blog.csdn.net/ZZZ___bj/article/details/78608801

版权

javaweb 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

ajax操作中以post方式提交异步请求

a) 创建xhr

var xhr = new XMLHttpRequest();

b) 发送请求

xhr.open("post","url");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在post请求中有这句话，get请求中没有，此为二者的区别。
xhr.send("name=suns&password=123456&…");

解释: 为什么在post方式提交数据时需要指定 application/xxxx…?
答案:

<form method="post" action="" enctype="application/x-www-form-urlencoded">
    <input type="text" name="name"/>
    ……
</form>

表单中默认有enctype属性，只有有这个enctype属性，才可以使用request.getParameter(“name”)获取到name的值。
若做文件上传，则enctype=”multipart/form-data”

在xhr操作中没有了form 就没有enctype属性, 所以必须手工设置
c) 处理响应

xhr.onreadystatechange = function(){
   if(xhr.readySate==4 && xhr.status==200){
     xhr.responseText;
   }
}

实例代码

//首先需要引入jquery-1.8.3.js插件,放在WebContent下面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //当name丢失焦点时调用此函数
            $("#name").blur(function(){

                //1.获得文本框中的内容
                var name = $(this).val();

                //2.发送ajax异步请求
                var xhr;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.open("post","CheckName");
               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("name="+name);

                //xhr处理相应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        /* alert(xhr.responseText); */
                        $("#msg").text(xhr.responseText);
                        }       
                    });
                });
            });
</script>

<title>注册</title>
</head>
<body>
    <table>
        <tr>
            <td>UserName</td>
            <td><input type="text" name="name" id="name"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserPassword</td>
            <td><input type="text" name="password" id="password"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserEmail</td>
            <td><input type="text" name="email" id="email"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td><input type="button" value="注册"/></td>
        </tr>
    </table>
</body>
</html>

ZZZ___bj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day02Ajax post请求

ajax操作中以post方式提交异步请求 a) 创建xhrvar xhr = new XMLHttpRequest();b) 发送请求xhr.open("post","url");xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在post请求中有这句话，get请求中没有，此为二者
复制链接

扫一扫

专栏目录