ajax post方式传递参数
2016-01-12 22:54
344 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <style> #box{ width:600px; height:200px; padding:20px; 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> <button onclick="loadHtml()">加载</button> <div id="box"></div> <script> 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>
js.php
<?php echo $_POST['n1'] + $_POST['n2']; ?>
相关文章推荐
- Day-14 JS中的JSON,for..in..与数组对象的操作
- 实训
- Alert Views
- Maven安装配置
- Java导出Excel
- 如何快速判断一个数是不是2的幂、3的幂、4的幂
- Robust Optimization VS Stochastic Optimization
- 如果你现在学Android---学习使用Kotlin进行Android开发
- Welcome to cx_Oracle’s documentation
- Netty
- 标准动画时长
- Android API 中文 (4) —— 布局
- Java中final和static关键字总结
- java页面导出excel实例,java页面导出word文档实例
- UITabBarController2
- 6-2 请编写一个函数,删除一个字符串的一部分。
- Java线程状态转换
- UITabBarController
- UISwitch
- Java异常处理