码迷,mamicode.com
首页 > Web开发 > 详细

Ajax向后台发送数据

时间:2017-05-22 21:23:57      阅读:277      评论:0      收藏:0      [点我收藏+]

标签: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向后台发送数据

标签:console   json   ready   标签   attr   tar   ati   func   doc   

原文地址:http://www.cnblogs.com/xyd134/p/6891289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!