提交表单

首先我们来看看这张图，通过这张图我们可以了解到前后端之间数据提交的详细流程。
在这里插入图片描述
用form表单的action实现数据的提交
要素:
- form表单
- action：提交的url
- method：默认就是get
- name属性
- 提交按钮

<form action=url>
   <input name="username" type="text">
   <input name="password" type="text">
   <input type="submit">
</form>

通过上述案例，我们明白了如何用表单提交数据，那么我们再看一个问题，如何用表单提交文件呢？在这之前，我们先了解一下post方法。

post提交数据的优点（为什么提交文件要用post方法）

提交的数据不在url中，安全性好一点
post提交数据没有长度限制，浏览器端只要你想，随意添加，服务器端可以选择是否接受这么多的数据
如果要上传文件，必须使用post

看到这里就可以解释，为什么用表单提交文件要用post方法了，那么让我们来看看代码的具体实现。

要素：
- form表单
- action：提交的url
- method：post
- type=file
- name属性
- enctype
默认值是 “application/x-www-form-urlencoded”
提交文件使用"multipart/form-data"

<form action=url method="post" enctype="multipart/form-data">
   <!--method 因为默认值是get，所以我们在这里要把它手动设置为post-->
    <input name="icon" type="file">
    <input type="submit">
</form>

用form表单实现数据的提交的关键点在于，记得书写name值，那么问题来了，为什么要书写name值？
因为form表单通过get提交数据的本质是，在 url 的背后拼接上name=value

格式：url?name=“timo”
在url的后面?key=value

因此我们可以看出，如果我们自己会拼接url，我们也可以实现数据的提交。ajax的get方法就是用url的数据拼接来实现的

用ajax实现数据的提交
在这里插入图片描述

用get方法提交数据

sub.onclick = function (){
    //1.创建异步对象
    var xhr = new XMLHttpRequest();
    //2.设置请求行（方式，url）
    //get请求，数据都是拼接在url中
    //xxx.php?key=value&key2=value2
    xhr.open('get','xxx.php?name=jack&skill=painting');
    //3.设置请求头(get请求可以不设置，post请求不发送数据也可以省略)
    //参数1 键名
    //参数2 值
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    //4.注册状态改变事件
    xhr.onreadystatechange = function(){
        //4.1.判断状态&请求码
        if(xhr.readyState == 4&&xhr.status == 200){
            // 因为返回的是JSON，所以不需要获取XML，获取Text即可
            //console.log(xhr.responseText);
            //转化为对应的格式
            var obj = JSON.parse(xhr.responseText);//把服务器返回的json转化为对象
            if(obj.code!=2000) {
                if (obj.code == 1001) {
                    alert("数据不能为空");
                } else if (obj.code == 1002) {
                    alert("数据不合法");
                } else if (obj.code == 3001) {
                    alert("用户名或密码不正确");
                } else {
                    alert("未知错误");
                }
            }else{
                alert("登陆成功");
            }
        }
    };
    //5.发送请求
    //post请求发送数据，写在send中
    //key = value&&key2=value2
    var postData ={username:user.value,password:password.value};//这是发送数据的固定格式
    var str =("username="+postData.username+"&"+"password="+postData.password);
    xhr.send(str);
};

用post方法提交数据

//绑定点击事件
sub.onclick = function (){
    //1.创建异步对象
    var xhr = new XMLHttpRequest();
    //2.设置请求行（方式，url）
    xhr.open('post','xxx.php');
    //3.设置请求头(get请求可以省略)
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    //4.注册状态改变事件
    xhr.onreadystatechange = function(){
        //4.1.判断状态&请求码
        if(xhr.readyState == 4&&xhr.status == 200){
            // 因为返回的是JSON，所以不需要获取XML，获取Text即可
            //console.log(xhr.responseText);
            //转化为对应的格式
            var obj = JSON.parse(xhr.responseText);//把服务器返回的json转化为对象
            if(obj.code!=2000) {
                if (obj.code == 1001) {
                    alert("数据不能为空");
                } else if (obj.code == 1002) {
                    alert("数据不合法");
                } else if (obj.code == 3001) {
                    alert("用户名或密码不正确");
                } else {
                    alert("未知错误");
                }
            }else{
                alert("登陆成功");
            }
        }
    };
    //5.发送请求
    //post请求发送数据，写在send中
    //key = value&&key2=value2
    var postData ={username:user.value,password:password.value};//这是发送数据的固定格式
    var str =("username="+postData.username+"&"+"password="+postData.password);
    xhr.send(str);
};

猜你喜欢