38js学习第二十二天form请求

已于 2022-05-15 15:54:13 修改
阅读量543 收藏
点赞数
文章标签： 学习 webview linq javascript
于 2022-05-15 15:54:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyaoshun123456/article/details/124783085
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01form表单请求</title>
</head>
<body>
    <h1>01form表单请求</h1>
    <form action="http://146.56.207.108:3000/Handler/UserHandler?action=login" method="post">
        账号：<input type="text" name="userName"><br>
        密码：<input type="password" name="password"><br>
        <button>提交</button>
    </form>
   
    <form action="https://query.asilu.com/weather/baidu/" method="get">
        输入城市名称：<input type="text" name="city"><br>
        <button>查询天气</button>
    </form>
    <br>
    <form action="http://146.56.207.108:3000/Handler/citylists" method="get">
        <button>获取城市列表</button>
    </form>
    <br>
    <form action="http://146.56.207.108:3000/Handler/citys" method="get">
        请输入要查询的城市:<input type="text" name="name"><br>
        <button>查询</button>
    </form>
    
</body>
<script>
    // 01form表单请求
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02同步异步</title>
</head>
<body>
    <h1>02同步异步</h1>
</body>
<script>
    // 同步
    // alert(1);
    // console.log(2);

    // 异步
    setTimeout(function(){
        console.log(1)
    },2000)
    console.log(2);
    console.log(3);

</script>
</html>

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03ajax的实例</title>
</head>

<body>
    <h1>03ajax的实例</h1>
    <h2 id="header"></h2>
</body>
<script>
    // 03ajax的实例

    // 01.创建异步请求对象   XMLHttpRequest
    var xhr;
    // 考虑到浏览器的兼容
    if (window.XMLHttpRequest) {
        // 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
        xhr = new XMLHttpRequest();
    } else {
        // IE5 IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log(xhr.readyState);
    // 2.设置请求行   open(method,url,async)
    // method:请求方式  get  post 
    // url:请求地址
    // async:是否异步  true  默认为异步
    // xhr.open("get", "http://146.56.207.108:3000/Handler/citylists", true);

    xhr.open("post", "http://146.56.207.108:3000/Handler/UserHandler?action=login", true);
    // console.log(xhr.readyState);

    // 3.发送请求  send(字符串)
    // get:数据在URL后面用?拼接  不传参数
    // xhr.send();

    // post:会有参数  要发送的数据(以字符串的形式)写在send()中
    // 设置请求头  setRequestHeader()
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xhr.send("userName=韩大队&password=123456");
    console.log(xhr.readyState);
    // xhr.readyState  存有XMLHttpRequest的状态   从0到4
    // 0:请求未初始化
    // 1:服务器连接已建立
    // 2:请求已接收
    // 3:请求处理中
    // 4:请求已完成,且响应已就绪
    // xhr.status  状态码

    // onreadystatechange   当状态发生变化时触发
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.response));
        }
        // console.log(xhr.readyState);
        // console.log(xhr.status);
        // console.log(JSON.parse(xhr.response));
        // document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
    }

    // JSON.parse()  将字符串类型的对象转换为对象
    // JSON.stringify()   将对象转换为字符串格式
    var json = {
        "name": "李密"
    };
    console.log(JSON.stringify(json))
    var str = '{"name":"李密"}';
    console.log(JSON.parse(str))
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>04ajax结合form表单进行get请求html</title>
</head>

<body>
    <h1>04ajax结合form表单进行get请求html</h1>
    <button id="btn">获取城市列表</button>
    <ul id="list">


    </ul>
</body>
<script>
    // 04ajax结合form表单进行get请求html

    var oBtn = document.getElementById("btn");
    var oList = document.getElementById("list");
    oBtn.onclick = function () {
        // 01.创建异步请求对象   XMLHttpRequest
        var xhr;
        // 考虑到浏览器的兼容
        if (window.XMLHttpRequest) {
            // 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
            xhr = new XMLHttpRequest();
        } else {
            // IE5 IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr.readyState);
        // 2.设置请求行   open(method,url,async)
        // method:请求方式  get  post 
        // url:请求地址
        // async:是否异步  true  默认为异步
        xhr.open("get", "http://146.56.207.108:3000/Handler/citylists", true);

        // xhr.open("post", "http://146.56.207.108:3000/Handler/UserHandler?action=login", true);
        // console.log(xhr.readyState);

        // 3.发送请求  send(字符串)
        // get:数据在URL后面用?拼接  不传参数
        xhr.send();

        // post:会有参数  要发送的数据(以字符串的形式)写在send()中
        // 设置请求头  setRequestHeader()
        // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        // xhr.send("userName=韩大队&password=123456");
        console.log(xhr.readyState);
        // xhr.readyState  存有XMLHttpRequest的状态   从0到4
        // 0:请求未初始化
        // 1:服务器连接已建立
        // 2:请求已接收
        // 3:请求处理中
        // 4:请求已完成,且响应已就绪
        // xhr.status  状态码

        // onreadystatechange   当状态发生变化时触发
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var res = JSON.parse(xhr.response)
                // console.log(res);
                if (res.msg == "success") {
                    // console.log(res.data);
                    for (var i = 0; i < res.data.length; i++) {
                        console.log(res.data[i].title)
                        var str = `<li>
                                    ${res.data[i].title}
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </li>`
                        oList.innerHTML += str
                    }
                } else {
                    console.log(res.msg)
                }
            }
            // console.log(xhr.readyState);
            // console.log(xhr.status);
            // console.log(JSON.parse(xhr.response));
            // document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
        }
    }

    // JSON.parse()  将字符串类型的对象转换为对象
    // JSON.stringify()   将对象转换为字符串格式
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05ajax结合form表单进行城市查询</title>
</head>

<body>
    <h1>05ajax结合form表单进行城市查询</h1>
    城市：<input type="text" id="city"><br>
    <button id="btn">查询</button>
    <ul id="list">


    </ul>
</body>
<script>
    // 05ajax结合form表单进行城市查询

    var oBtn = document.getElementById("btn");
    var oCity = document.getElementById("city");
    var oList = document.getElementById("list");
    oBtn.onclick = function () {
        // 01.创建异步请求对象   XMLHttpRequest
        var xhr;
        // 考虑到浏览器的兼容
        if (window.XMLHttpRequest) {
            // 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
            xhr = new XMLHttpRequest();
        } else {
            // IE5 IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr.readyState);
        // 2.设置请求行   open(method,url,async)
        // method:请求方式  get  post 
        // url:请求地址
        // async:是否异步  true  默认为异步
        xhr.open("get", "http://146.56.207.108:3000/Handler/citys?name="+oCity.value, true);

        // 3.发送请求  send(字符串)
        // get:数据在URL后面用?拼接  不传参数
        xhr.send();

        // xhr.readyState  存有XMLHttpRequest的状态   从0到4
        // 0:请求未初始化
        // 1:服务器连接已建立
        // 2:请求已接收
        // 3:请求处理中
        // 4:请求已完成,且响应已就绪
        // xhr.status  状态码

        // onreadystatechange   当状态发生变化时触发
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var res = JSON.parse(xhr.response)
                // console.log(res);
                if (res.msg == "success") {
                    // console.log(res.data);
                    for (var i = 0; i < res.data.length; i++) {
                        console.log(res.data[i])
                        var str = `<li>
                                    ${res.data[i].name}
                                </li>`
                        oList.innerHTML += str
                    }
                } else {
                    console.log(res.msg)
                }
            }
            // console.log(xhr.readyState);
            // console.log(xhr.status);
            // console.log(JSON.parse(xhr.response));
            // document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
        }
    }

    // JSON.parse()  将字符串类型的对象转换为对象
    // JSON.stringify()   将对象转换为字符串格式
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>06ajax结合form表单进行post请求</title>
</head>

<body>
    <h1>06ajax结合form表单进行post请求</h1>

    账号：<input type="text" id="user"><br>
    密码：<input type="password" id="psw"><br>
    <button id="login">登录</button>
</body>
<script>
    // 06ajax结合form表单进行post请求


    // 获取元素
    var oUser = document.getElementById("user");
    var oPsw = document.getElementById("psw");
    var oLogin = document.getElementById("login");

    // 点击登录按钮
    oLogin.onclick = function () {
        // 01.创建异步请求对象   XMLHttpRequest
        var xhr;
        // 考虑到浏览器的兼容
        if (window.XMLHttpRequest) {
            // 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
            xhr = new XMLHttpRequest();
        } else {
            // IE5 IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr.readyState);
        // 2.设置请求行   open(method,url,async)
        // method:请求方式  get  post 
        // url:请求地址
        // async:是否异步  true  默认为异步

        xhr.open("post", "http://146.56.207.108:3000/Handler/UserHandler?action=login", true);
        // console.log(xhr.readyState);

        // post:会有参数  要发送的数据(以字符串的形式)写在send()中
        // 设置请求头  setRequestHeader()
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xhr.send("userName=" + oUser.value + "&password=" + oPsw.value);
        console.log(xhr.readyState);
        // xhr.readyState  存有XMLHttpRequest的状态   从0到4
        // 0:请求未初始化
        // 1:服务器连接已建立
        // 2:请求已接收
        // 3:请求处理中
        // 4:请求已完成,且响应已就绪
        // xhr.status  状态码

        // onreadystatechange   当状态发生变化时触发
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.response));
            }
            // console.log(xhr.readyState);
            // console.log(xhr.status);
            // console.log(JSON.parse(xhr.response));
            // document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
        }
    }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>07ajax的封装</title>
</head>

<body>
    <h1>07ajax的封装</h1>
</body>
<script>
    // 07ajax的封装

    // 封装：
    // 1.相同部分  不做处理  
    // 2.不同的部分  以参数的形式表示


    // 不同的部分
    // 1.请求地址  url
    // 2.请求方式  method
    // 3.是否异步  async
    // 4.发送的数据  参数  data
    // 5.成功后执行的函数  success
    // 6.失败后执行的函数  fail


    function ajax(url, method, async, data, success, fail) {
        // 01.创建异步请求对象   XMLHttpRequest
        var xhr;
        // 考虑到浏览器的兼容
        if (window.XMLHttpRequest) {
            // 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
            xhr = new XMLHttpRequest();
        } else {
            // IE5 IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.设置请求行   open(method,url,async)
        // method:请求方式  get  post 
        // url:请求地址
        // async:是否异步  true  默认为异步

        if (method.toLowerCase() === "get") {
            xhr.open("get", url + "?" + data, async);
            // get:数据在URL后面用?拼接  不传参数
            xhr.send();
        } else if (method.toLowerCase() === "post") {
            xhr.open("post", url, async);
            // post:会有参数  要发送的数据(以字符串的形式)写在send()中
            // 设置请求头  setRequestHeader()
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        } else {
            console.error("错误", "请求方式错误")
        }
        // xhr.readyState  存有XMLHttpRequest的状态   从0到4
        // 0:请求未初始化
        // 1:服务器连接已建立
        // 2:请求已接收
        // 3:请求处理中
        // 4:请求已完成,且响应已就绪
        // xhr.status  状态码

        // onreadystatechange   当状态发生变化时触发
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var res = JSON.parse(xhr.response); //将获取到的数据转换为对象
                    success(res)
                } else {
                    fail(xhr.status, xhr.statusText)
                }
            }
        }
    }

    ajax("http://146.56.207.108:3000/Handler/citylists", "get", true, "", function (res) {
        console.log(res)
    }, function (status, statusText) {
        console.log(status, statusText);
    })

    ajax("http://146.56.207.108:3000/Handler/UserHandler?action=login", "post", true, "userName=老韩&password=123456",
        function (res) {
            console.log(res)
        },
        function (status, statusText) {
            console.log(status, statusText);
        })
</script>

</html>

liuyaoshun123456
关注
js实现form的submit请求
日常笔记/总结/系列知识梳理
05-23 5454
代码 /** * 登录 * created by lius on 2020-05-23 * */ loginCA(){ // 创建表单 var dlform = document.createElement('form'); dlform.style = "display:none;"; dlform.method = 'get'; dlform.action = this.$api.paths.ssopath + '/v1/weblogin/check/user/redirect';
requests库如何处理 - POST请求常见的两种请求体格式：表单格式&JSON格式
最新发布
孤寒者的博客
11-11 4235
requests库如何处理 - POST请求常见的两种请求体格式：表单格式&JSON格式
Form表单请求
热门推荐
zhangquanit的专栏
09-08 1万+
Form表单请求
JS 创建Form请求
桃树林
07-11 1531
// make form and submit // 也可以选择将 action 单独拎出来传参 function makeFormAndSubmit(data) { let form = document.createElement('form'); form.id = 'idForm'; form.name = 'name_form'; form.style = 'displa...
form表单请求数据
m0_60979337的博客
01-11 1022
form表单上传请求 练习
form表单如何使用js来发送请求？
qq_30908729的博客
12-11 2184
假如一个页面的form标签的id属性为objForm。下面提供两种方法： 1. 通过$('#objForm').serialize()序列化表单中的数据，得到的结果是不同参数之间用&连接起来的字符串 解决方法：http://www.yayihouse.com/yayishuwu/chapter/1030
javascript asp教程第十二课---session对象
10-31
### JavaScript ASP教程第十二课---Session对象详解 在本篇教程中，我们将深入探讨ASP（Active Server Pages）中的Session对象及其应用。Session对象是ASP的一个关键特性，它允许开发者跟踪单个用户在多个页面间的...
自学Python第二十二天- Django框架(一)创建项目、APP、快速上手、请求和响应流程、模板、数据库操作
runsong911的博客
08-04 2935
自学Python第二十二天- Django框架
Node.js | express 获取请求参数 | 客户端渲染 | 服务端渲染
前端之行，任重道远！
10-18 8573
前面我们已经讲过express的路由和中间件，这一节我们将去介绍使用express时怎么获取请求的参数，以及客户端渲染和服务端渲染的区别与作用，让我们开始吧！博主的Node.js从入门到精通专栏正在持续更新中，关注博主订阅专栏学习Node不迷路！❤️
Form表单和ajax中的post请求&&后台获取数据方法（深度好文）
小小刚CSDN
01-25 2815
最近要做后台数据接收，因为前台传来的数据太过于混乱，所以总结了一下前台数据post请求方法，顺便写了下相对应的后台接收方法。         前台主要的contenttype为下面三种：（需要注意的是请求头中datatype与contenttype的区别，datatype是要求浏览器返回的数据格式，这里的contenttype指的是提交的数据格式） 应用情景：
form表单
mengfanshaoxia的博客
05-24 1303
form表单常用属性action和method action="#":规定当提交表单时向何处发送表单数据，其引号里填地址。 method:规定用于发送 form-data 的 HTTP 方法 常用get、post！ get请求不安全：将name属性的信息暴露在地址栏上，地址栏默认大小64kb post请求安全：不会将信息暴露在地址栏上 有以下8种请求方式： 1GET请求指定的页面信息，并返回实体主体。 2HEAD类似于GET请求，只不过返回的响应中...
js 发起 表单 请求
i_x_x的专栏
01-18 166
在别的地方看到的 出处现在找不到了 function post(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; temp.method = "post"; ...
FORM表单请求和AJAX请求使用和适用场景
Oxygen的博客
11-26 1万+
最常使用的两种信息提交处理方式第一种：表单提交FORM Submit 方式FROM提交是我们经常适用的向后台提交数据的一种方式，Form Tag 适用方法 参考：<form action="form_action.asp" method="get" onsubmit=""> <p>First name: <input type="text" name="fname" /></p> <
温故而知新： 关于 js Form 方式提交的一些新认知
dicha7140的博客
08-08 99
这里介绍的是通过js进行异步form提交，而不是表单Form Submit提交。 提交方式主要有以下两种： 参数为字符串方式的提交，如：a=b&c=d formData方式提交，如：new FormData() （可选）简单的php测试代码： <?php header('Access-Control-Allow-Origin:*')...
js提交form
PentaQwQ的博客
03-23 334
document.getElementById('myform').submit()
【JavaEE】_form表单构造HTTP请求
m0_63299495的博客
02-20 1316
form表单可以用于构造GET请求与POST请求，本文介绍form表单构造HTTP请求的方法。
js构建form表单请求后端
weixin_43328524的博客
02-06 818
js构建form表单请求后端，并将数组传给后端。
前端——form表单、网络请求方式、css
kdq18486588014的博客
04-25 1375
文章目录一、form表单1.属性action2.input标签3.select标签4.textarea标签5.lable标签二、网络请求方式1.get请求2.post请求三、css1.语法结构2.语法注释3.多种引入css的方式4.基本选择器4.1标签选择器(范围查找)4.2类选择器(范围查找)4.3id选择器(精确查找)4.4通用选择器4.5组合选择器4.5.1儿子选择器(关键符号是大于号)4.5.2后代选择器(关键符号是空格)4.5.3毗邻选择器(关键符号是加号)4.5.4弟弟选择器(关键符号是小波浪号
form表单的get请求和post请求学习心得
weixin_44720212的博客
06-24 3272
form表单在提交时，method一般有两种方式，即get请求和post请求，对应views中request.method的get和post，两种请求最直观的区别就是，get请求会在网页导航栏路由中显示提交的结果，而post请求则不会，而是隐蔽地传给服务端，一定程度上更加安全。
axios在Node.js中发送post请求：form-data方式详解
"本文将深入探讨如何在Node.js环境中使用axios库进行POST请求，特别是涉及到以form-data格式提交数据，如上传图片。文章首先介绍了作者在寻找一个支持Promise的网络请求库时选择了axios，但在尝试使用axios进行POST...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值