zoukankan      html  css  js  c++  java
  • Ajax向后台发送数据

    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; 600px;" src="http://www.autohome.com.cn"></iframe>
    
    
    
     function Test1() {
                var url=$('#url').val();
                $('#iframe').attr('src',url);
            }
  • 相关阅读:
    移动端 css 禁止长按屏幕选中
    找到并替换 字符串中最后一个(不一定是末尾最后一个) 指定字符
    event.preventDefault() 解决按钮多次点击 导致页面变大
    history.go(-1)在不同浏览器中的解析
    clean-css 安装 使用
    Objective-C通过联合存储为类增加属性及原理解析
    IOS-CGAffineTransformMake 矩阵变换 的运算原理
    iOS--inputView和inputAccessoryView
    Objective-C中的@Property详解
    Objective-C--Runtime机制
  • 原文地址:https://www.cnblogs.com/xyd134/p/6891289.html
Copyright © 2011-2022 走看看