Ajax向後台發送資料

標籤：console   json   ready   標籤   attr   tar   ati   func   doc   

Ajax向後台發送資料，三種情況：

1：Ajax手動發資料

#GET  發資料
<div>          <a class="btn" onclick="AjaxSubmit1();">點我</a>        </div><script src="/static/js/jquery-3.2.0.js"></script>    <script>        function AjaxSubmit1() {            $.ajax({                url:‘/ajax1.html‘,                type:‘GET‘,                data:{‘p‘:123},                success:function (arg) {                }            })        } </script>

 
#POST 發送資料
function AjaxSubmit3() {            $.ajax({                url:‘/ajax1.html‘,                type:‘POST‘,                data:{‘p‘:123},                success:function (arg) {                }            })        }

 

2：HMLHttpRequest方法

#get發送資料

 function AjaxSubmit2() {            var xhr=new XMLHttpRequest();            xhr.onreadystatechange=function () {                if(xhr.readyState==4){                    //接受完畢伺服器返回的資料                    console.log(xhr.responseText);                }            };            xhr.open(‘GET‘,‘/ajax1.html?p=123‘);            xhr.send(‘null‘);        }

#POST發送資料

function AjaxSubmit4() {            var xhr=new XMLHttpRequest();            xhr.onreadystatechange=function () {                if(xhr.readyState==4){                    //接受完畢伺服器返回的資料                    console.log(xhr.responseText);                }            };            xhr.open(‘POST‘,‘/ajax1.html‘);            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset-UTF-8‘)            xhr.send(‘p=456‘);        }

 

3：Iframe標籤+Form表單（‘偽’Ajax）

 <h6>基於iframe+Form表單</h6>        <iframe id=‘iframe‘ name="ifra"></iframe>        <form id=‘fm‘ action="/ajax1.html" method="POST" target="ifra">            <input name="root" value="111"/>            <a onclick="AjaxSubmit5();">提交</a>function reloadIframe() {{#            this.contentWindow#}            var content=this.contentWindow.document.body.innerHTML;            var obj=JSON.parse(content);            if(obj.status){                alert(obj.message);            }        }

 

 

 

ps:基於Iframe發送資料

<h6>學習iframe</h6>        <div>            <input id="url" placeholder="請輸入URL"/><a onclick="Test1();">查看</a>        </div>        <iframe id=‘iframe‘ style="height: 800px;width: 600px;" src="http://www.autohome.com.cn"></iframe> function Test1() {            var url=$(‘#url‘).val();            $(‘#iframe‘).attr(‘src‘,url);        }

 

Ajax向後台發送資料