1. 程式人生 > >Ajax向後臺發送數據

Ajax向後臺發送數據

基於 src null ssa charset value test 3.2 form

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向後臺發送數據