zoukankan      html  css  js  c++  java
  • ajax执行后台返回的提交表单及JS

    1.在做Ajax请求的时候,有时候会从后台返回拼接好的表单及js代码,如下,是后台返回的数据:

    string result = "<form id='paysubmit' name='paysubmit' action='http://m.pighem.cn/service/rest.htm?_input_charset=utf-8' method='get'><input type='hidden' name='_input_charset' value='utf-8'/><input type='hidden' name='format' value='xml'/></form><script>document.forms['paysubmit'].submit();</script>";
    Response.Write(result);
    View Code

    正如你看到的那样,上面是后台返回的一个表单及js代码,那么前端如何来自动执行返回的js代码呢,Ajax请求如下:

     1 $.ajax({
     2                                     type: "POST",
     3                                     contentType: "application/json",
     4                                     url: "Handler/Handler.ashx?action=SaveTicketsInfos_pay&u=<%=u%>&s=<%=s %>"+"&money="+money+"&xm="+xm+"&mobile=<%=mobile%>&sid="+sid,
     5                                     dataType: 'html',
     6                                     timeout: 30000,
     7                                     async:true,
     8                                     success: function (data2) {
     9                                         loading(false);
    10                                         $('body').append(data2);
    11                                         return;
    12                                 }
    13                               });
    View Code

    这样只要在body中添加返回的js就可以自动执行了。要注意这里的dataType为html格式的,因为返回的数据是HTML!切记!!

    2.如果表单是写在前端页面上的,那么在Ajax请求后在后台将表单的数据返回来后,然后在前端手动用js提交表单:

    前端代码:

    <body>
        <form id="formTest" runat="server" action="" method="post" enctype="application/x-www-form-urlencoded" rel="external" data-ajax="false" target="_self">
            <input type="hidden" id="serverUrl" runat="server" value="" />
            <input type="hidden" id="version" runat="server" value="1.0" />
    </form>
    <input type='button' id='btnSubmit' value='提交' onclick='submit();'/>
        </body>
    </body>
    <script type="text/javascript">
        function submit(){
            $.ajax({
                                    type: "POST",
                                    contentType: "application/json",
                                    url: "Handler/QuickPayHandler.ashx?action=SaveTicketsInfos_Netbank&u=<%=u%>&s=<%=s %>"+"&money="+money+"&xm="+xm+"&mobile=<%=mobile%>&sid="+sid,
                                    dataType: 'json',
                                    timeout: 30000,
                                    async:true,
                                    success: function (data2) {
                                        loading(false);
                                        if (data2.exec) {
                                             $("#version").val(data2.version);
                                             $("#serverUrl").val(data2.serverUrl);
    document.getElementById("form1").action = "Quick.aspx?s=<%=s%>&u=<%=u%>";                                       document.getElementById("formTest").submit();
                                        }
                                        else{
                                            alert(data2.msg);
                                        }
                                    }
                                });
        }
    </script>
    View Code

    PS:如果涉及到多层Ajax嵌套,有时候要注意Ajax请求的async,同步则为false,异步则为true,默认是异步的。

  • 相关阅读:
    apache 修改文件上传大小限制
    linux 桥接模式下 固定ip 设置
    简易 红包生成
    Sublime Text 3 快捷键
    excle 文件的导入和导出
    php 下载文件
    右则css 小浮条
    html 自动跳转页面
    Media Queries详细
    mobile响应式页面meta信息相关记录
  • 原文地址:https://www.cnblogs.com/Leawee/p/4238336.html
Copyright © 2011-2022 走看看