Ajax向后台发送数据

Posted 2020-09-19 清风徐来xyd

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);
        }