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

已于 2022-05-15 15:54:13 修改
阅读量491 收藏
点赞数
文章标签： 学习 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现form的submit请求
日常笔记/总结/系列知识梳理
05-23 5109
代码 /** * 登录 * 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';
javascript完全学习手册1 源码
04-12
第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 1.2.1 客户端应用 5 1.2.2 ...
HTML 表单标签
weixin_45904557的博客
02-28 8031
一、什么是表单标签 表单是用来采集用户的输入数据，然后将数据提交给服务器 二、表单的组成 一个表单有三个基本组成部分： ①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 ②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ③表单按钮：包括提交按钮、复位按钮和一般按钮； 三、表单标签 表单标签＜form＞＜/form＞ 功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据
javascript POST方式提交表单
程序员写的技术 FAQ 和杂文
12-25 2024
更多> /*  * javascript POST方式提交表单  */ function update_submit(path, params, method) { method = method || "post";     //如果没有特别声明，默认post方式     var form = document.createElement("form");     for
form表单如何使用js来发送请求？
qq_30908729的博客
12-11 2155
假如一个页面的form标签的id属性为objForm。下面提供两种方法： 1. 通过$('#objForm').serialize()序列化表单中的数据，得到的结果是不同参数之间用&连接起来的字符串 解决方法：http://www.yayihouse.com/yayishuwu/chapter/1030
js 怎么让axios的post以json、form表单的形式发送请求，请求头content-type
PrimaryColor
11-09 3987
代码： /** * post方法，对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * @param {Boolean} json [true：json格式请求头；false：FormData格式请求头] */ export function post(url, params = {}, json = false) { // json格式请求头 const headerJSON =
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
├─(21) 05 python s3 day43 js练习之二级联动.avi ├─(22) 06 python s3 day43 jquery以及jquery对象介绍.avi ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器....
2021-2022计算机二级等级考试试题及答案No.15972.docx
10-29
13. **TCP三次握手**：第一次握手是由客户端发起连接请求，等待服务器确认。 14. **记事本程序**：记事本程序创建的默认文件扩展名是TXT。 15. **Access字段名**：Access字段名长度限制为1到64个字符，而不是255个...
国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架
12-02
<script language="JavaScript" type="text/javascript"> $(document).ready(function(){ //告诉formValidator框架要验证userReg这个表单，如果提交时还有错误，则弹出对话框通知 $.formValidator.initConfig({...
js构建form表单请求后端
weixin_43328524的博客
02-06 761
js构建form表单请求后端，并将数组传给后端。
js模拟form表单提交Http请求，并实现跳转到新窗口打开页面
美奇软件开发工作室
01-06 6552
导读： 一些特殊的应用场景，需要在jquery里实现对后端的访问请求，同时在新窗口中打开页面。一般情况下我们在jquery里请求后端业务都是用会ajax，但ajax是会返回数据的，并且不会打开新页面窗口，所以ajax并不符合我们的场景需求。因此我们需要用另一种方式，也就是模拟form表单，实现post提交，并打开新窗口。 代码如下： /** *模拟form表单，实现post提交，并打开新窗口 * url：请求链接 * postData：json格式的post参数 */ function po
JS 创建Form请求
桃树林
07-11 1498
// make form and submit // 也可以选择将 action 单独拎出来传参 function makeFormAndSubmit(data) { let form = document.createElement('form'); form.id = 'idForm'; form.name = 'name_form'; form.style = 'displa...
HTML表单知识点总结
yihjh的博客
10-13 706
<form action="index.html" method="get"> </form> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单元素</title> </head> <body> <!-- form 是声明表单--> <!--action ...
form表单元素，普通按钮标签
weixin_38945490的博客
03-08 465
form表单元素： 作用：是作为用户信息收集的 action=“”属性：表单数据提交到后台服务器的属性 method="" 属性：表单的提交方式，一共有两种提交方式，get和post get:显示提交，不安全，提交的数据量大 post:隐示提交，安全，提交的数据量小 普通按钮标签 ：button，有type属性,里面有三个值： submit:不写type属性 默认submit（表单提交） reset:重置表单按钮 button：普通按钮 注意：按钮里面的提交和重置只针对form表单有效,不在form内部，无
使用js提交form表单的两种方法
weixin_33862993的博客
08-23 721
提交form表单的时候瑶族一些简单的验证，验证完后才能提交，避免无效提交。 1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一： 在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = document.getE...
js操作form表单
wyqwilliam的博客
12-14 392
<html> <head> <meta charset="utf-8"> <title>js操作form表单</title> <!-- js操作form表单 特点： 通过js操作form表单，可以实现动态的改变提交地址和提交方式 同时通过表单对象.submit()，实现了普通按钮具备...
Form表单&GET请求和POST请求
weixin_55739922的博客
09-28 2173
input type=“hidden” 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（input type=“checkbox” 是复选框 checked=“checked” 表示默认选中。input type=“submit” 是提交按钮 value属性修改按钮上的文本。input type=“reset” 是重置按钮 value属性修改按钮上的文本。input type=“button” 是按钮 value属性修改按钮上的文本。1，浏览器地址栏中只有action属性值。
讨论request.form()和request
狂人日记
12-03 4450
   大家在学习ASP时可能在很多书上都看到request的用法，很多书上用request("name")来接收传过来的参数所以很多人都认为这样的方式是最好的接收参数的方法，可以代替request.form()和request.querystring()其实方便是方便，但是其中的不安全因素，可能对一些初学者或者是没有安全意识的程序员来说根本没有觉察出来，下面我就针对这样的用法提出个
java form data请求
最新发布
04-29
通过Java发送Form Data请求时，需要在请求头中指定请求的数据格式为multipart/form-data，并且需要将表单数据按照一定的格式进行编码，以确保表单数据能够被服务器正常解析和处理。在编码表单数据时，一般采用RFC...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值