目录
工具:浏览器;
打开你的浏览器,在地址栏里写url,按下回车,就可以构造出get请求;(如下图)
![]()
工具:vscode;
步骤一:在vscode中,创建html文件,构造一个form表单;(具体的如下代码)
- <body>
- <form action="https://cn.bing.com/" method="get">
- <input type="text" name="a">
- <input type="text" name="b">
- <input type="submit" value="提交">
- form>
- body>
解释:
步骤二:打开HTML网页,输入你想输入的值;(如下图)

最后:网页跳转,地址栏(如下图)
![]()
工具:vscode,jquery第三方库;
最初ajax主要是借助HTTP传输xml,现在xml用的少了,因此ajax往往用来传输其他数据,例如json;
form表单构造的数据一定会出发页面跳转,时间慢,开销大,所以并不是一件好事,使用ajax就可以不触发跳转,达到“局部刷新”的效果;
步骤一:ajax api是浏览器自带的,原生api不太好用,所以可以使用第三方库,代替原生api;打开jquery官网(js中最知名的第三方库之一),复制script链接;

步骤二:输入以下代码;
- <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js">script>
- <script>
- $.ajax({
- type: 'get',
- url:'https://cn.bing.com/',
- success: function(body) {
- //服务器返回正确响应(状态码:200),浏览器就会调用这个函数,处理响应;
- //参数body就是响应的正文
- console.log("OK~");//打印日志
- },
- error: function() {
- //服务器返回一个错误响应,浏览器就会调用error对应的函数
- console.log("error~");//打印日志
- }
- })
- script>
解释:
最后:打开html,打开调试,会观察到如下信息:

解释原因:
这里出错了;原因是跨域(一个页面在域名a下通过ajax访问域名b的资源),这里浏览器是禁止的,除非跨域的网站返回的响应中告诉浏览器可以;(大部分网站是不可以的);
解决方法:
这里我们可以自己写一个服务器,把页面放到自己的服务器上,让页面访问自己服务器的资源;(这里不展开讲,后期会出博客);
工具:
属于是一个专门构造HTTP请求的第三方工具,主要是帮助接口测试的,简而言之:它可以用来更方便的构造HTTP请求;
具体步骤如下图:


最后结果:

具体步骤如下图: (简直不要太爽~)


