javascript - 求一个纯js 发起ajax post请求的例子 还有post请求的参数 有什么要注意的？？？

Question

求一个纯js 发起ajax post请求的例子 还有post请求的参数 有什么要注意的？？？

<script type="text/javascript">
var xmlhttp;
function Button1_onclick() {

var name = encodeURI("北京西");
var dzb = "username=" + name + "&password=123";
send(dzb);

function send(arg) {
  CreateXMLHttpRequest();
  xmlhttp.onreadystatechange = callhandle;
  //xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);
  xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true);
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //用POST的时候一定要有这句
  xmlhttp.send(arg);

}

function CreateXMLHttpRequest() {
  if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
}

function callhandle() {
  if (xmlhttp.readyState == 4) {
    if (xmlhttp.status == 200) {
      alert(xmlhttp.responseText);
    }
  }
}

}

</script>

Answer 1

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if ( xhr.readyState === 4 ) {
        if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ) {
            // 成功：处理 xhr.responseText 
        } else {
            // 失败
        }
    }
};

xhr.open( 'POST', './url', true );
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send('key1=value1&key2=value2');

post 参数的格式和 get 的一样（都是以&分隔的键值对），只不过不是作为查询字符串放在 url 的后面，而是通过请求主体进行发送（也就是作为 send 的参数）。

Answer 2

$.ajax({
            type: 'Post',
            url: '/api/characters',
            data: {name:name,gender:gender}
        })
            .done((data) => {
                this.actions.addCharacterSuccess(data.message);
            })
            .fail((jqXhr) => {
                this.actions.addCharacterFail(jqXhr.responseJSON.message);
            });
            
            

传统一点的

$('#btn_sumbit').click(function() {
                var loginform=$("#login_form");
                var loginParam = loginform.serialize();
                //alert(loginParam);
                $.ajax({
                    type:'post',
                    url:'{:U("Auth/login")}',
                    data:loginParam,
                    async:false,
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if(data.status==1){
                            isLogin=true;
                            restPageStatus(isLogin);
                            $('#loginModal').modal('hide');
                        } else {
                            var alertinfo=$('.alert-danger');
                            alertinfo.empty();
                            alertinfo.append(data.info);
                            alertinfo.show();
                        }
                    }
                });
            });

Answer 3

自己搜一下XMLhttprequest的例子，官网就有的

注意兼容性 + 跨域