kanade

Chrome浏览器模拟POST提交数据
1. 首先我们要了解 XHR 和 AJAX 的基本知识a. Runoob 中关于 AJAX 的介绍2. 准备工作a...
扫描右侧二维码阅读全文
07
2019/01

Chrome浏览器模拟POST提交数据

1. 首先我们要了解 XHR 和 AJAX 的基本知识

a. Runoob 中关于 AJAX 的介绍

2. 准备工作

a. 准备一个具备开发者控制台的浏览器 (我以Chrome为例)

b. 目标POST地址与提交数据

3. 传统的 XHR 发送 POST 请求 (会触发CORS跨域限制)

a. 打开开发者控制台,切换至 Console 分页

b. 建立 XHR 对象

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr= new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xhr= new ActiveXObject("Microsoft.XMLHTTP");
}

c. 初始化 POST 请求地址与发送数据

var xhrurl = "http://study.acgme.cn/test/xhr.php";
var xhrdata = "msg=nishigehaoren";

d. 发送 POST 请求

xhr.open("POST", xhrurl, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(xhrdata);
console.log(xhr.responseText);

4. 通过 jQuery 的 $.ajax() 方式发送 POST 请求

a. 加载 jQuery.js 文件(writeln方法会清空页面数据)

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

b. 初始化 POST 请求地址与发送数据

var xhrurl = "http://study.acgme.cn/test/xhr.php";
var xhrdata = "msg=nishigehaoren";

c. 发送 POST 请求

$.ajax({
    url: xhrurl,
    type: 'post',
    dataType: 'text',
    data: xhrdata,
    success: function(msg){
        console.log(msg);
    },
    error: function(err){
        console.error(err);
    }
})

4. 注意事项

a. HTTP请求通常有域限制,如果出现非法跨域请求,比如:

Access to XMLHttpRequest at 'http://study.acgme.cn/test/xhr.php' from origin 'http://acgme.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现这种情况时,解决办法有两种:

  1. 在目标文件中加入文件头: Access-Control-Allow-Origin: *;
  2. 在目标域名下进行请求,比如本例中,在 测试域名 页面下即可进行请求。
Last modification:January 7th, 2019 at 11:32 pm

Leave a Comment

打扰了,还没做好,你去看看别的吧。。。

真的要离开我吗?

项目作者:Illyasviel(@illyasviels)
当前版本号:1.0.0。
持续更新请关注作者Github。