ajax用post方法传递参数

时间 2019-11-24

标签 ajax post 方法传递参数栏目 Ajax 繁體版

原文原文链接

<!DOCTYPE html>php

<html lang="en">html

<head>ajax

<title>JS</title>post

<style>学习

#box{url

width:600px;code

height:200px;orm

padding:20px;htm

border:1px solid #999;

}

</style>

</head>

<body>

<h1>ajax post方式传递参数</h1>

<hr>

Number1: <input type="text" id="num1"><br>

Number2: <input type="text" id="num2"><br>

function loadHtml(){

//获取表单中的数据

var num1 = document.getElementById('num1').value;

var num2 = document.getElementById('num2').value;

//实例化XMLHttpRequest对象

if(window.XMLHttpRequest){

//非IE

var xhr = new XMLHttpRequest();

}else{

//IE 6

//var xhr = new ActiveXObject('Microsoft.XMLHTTP');

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

//给xhr绑定事件.检测请求的过程

xhr.onreadystatechange = function(){

console.log(xhr.readyState);

//若是成功接收到并响应

if(xhr.status == 200 &&　xhr.readyState == 4){

document.getElementById('box').innerHTML = xhr.responseText;

}

//进行请求的初始化

xhr.open('post','js.php',true);

//设置请求头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

//正式发送请求

xhr.send('n1='+num1+'&n2='+num2);

}

</script>

</body>

</html>

须要代码学习资料的同窗，能够加群434623999