zoukankan      html  css  js  c++  java
  • ajax用post方法传递参数

     

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS</title>

        <style>

            #box{

                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>

  • 相关阅读:
    观察OnPaint与OnIdle与OnSize事件
    wxPython的Refresh与事件双重响应
    DLL的静态调用和动态调用
    Delphi String的散漫记录,真是知识无数,陷阱无数
    VC调用Delphi DLL
    终于理解了什么是LGPL
    安装postgresql碰到Unable to write inside TEMP environment path
    图解:Activity生命周期
    Dephi泛型
    传递双重指针申请内存,典型用法
  • 原文地址:https://www.cnblogs.com/debug666/p/7718234.html
Copyright © 2011-2022 走看看