ajax post方式傳遞參數

本文轉載自查看原文 2016-01-12 22:54 2565 php/ javascript

<!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'];
 ?>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 $.ajax()post方式請求參數無法傳遞（一） ajax post 傳遞數組參數 ajax get方式傳遞參數 axios 使用post方式傳遞參數，后端接受不到 $.post() 傳遞多個參數. webapi 之 post參數傳遞 okhttp post用json傳遞參數 django-ajax之post方式 laravel Ajax post方式的使用 axios 使用post方式傳遞參數，后端接受不到問題