1

我正在与第三方合作，该第三方根据我的服务器（java servlet）的发布响应生成 div 内容。我遇到的一个问题是我们有一个单选按钮列表，表格中的单选按钮是水平的。

当我在该表单上点击提交时，我需要对我的服务器进行后期调用并在第三方站点中重新呈现该 div。我使用了不同的 jQuery 变体但无济于事。

我已经包含了最新的 jQuery（也尝试了 jQuery 的子 1.4 版本）。当我点击表单上的提交按钮时，我只是呈现相同的页面，而不是呈现对服务器的调用。

我该如何做到这一点，更新本地页面上的 div 以根据我编写的表单呈现我的帖子结果？以下是我目前拥有的：

形式：

    <form action='\' id=\"form1\">... radio buttons ... </form>
    <input hidden field name = value passed from Java method>
    <input hidden field id = value passed from Java method>
    <input hidden field the value of the selected checkbox>

HTML：

    <script language='Javascript' type='text/javascript'>
    $(\"#form1\").submit(function(event) {
      event.preventDefault();

      var $form = $( this ),
        name2= $form.find( 'input[name=\"name\"]' ).val(),
        id2= $form.find( 'input[name=\"id\"]' ).val(),
        url = $form.attr( 'action' );
    $.post( url, { name2:name, id2:id },
      function( data ) {
         var content = $( data ).find( '#content' );
         $( \"#this_div\" ).empty().append( content );
      });
    });
    </script>
4

1 回答 1

0

从第三方站点向您的服务器发送 AJAX 请求：

由于浏览器安全要求，目前无法向第三方服务器发出跨域 AJAX 请求。这意味着 $.post 请求仅限于所谓的同域策略。

因此，如果您的服务器是 example.com 而第三方服务器是 domain.com，则 domain.com 无法向您的服务器发出 AJAX 请求。

但是，您可以使用一种技术来规避这种浏览器安全性。虽然 XMLHttpRequests 不可能跨域，但 JavaScript<script>标记块可以从任何域加载 JavaScript。

脚本标签远程处理或 JSONP 涉及使用脚本标签向您的服务器发送请求：

脚本标签：

// from domain.com to your server, example.com, make a request using a script tag
var urlWithParams = "http://example.com/getHTMLForm.do?id2=" + id2 + "&name2" + name2;
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src", urlWithParams);

// create a script tag, which invokes your servlet 
document.getElementsByTagName("head")[0].appendChild(script);

getHTMLForm.do 是您当前用于发布数据并在响应中获取 HTML 的假设 servlet。您无需使用 POST 在请求正文中传递参数，而是将数据作为查询参数传递。

服务器响应：：

然后，服务器使用您在服务器上生成的 JSON 进行响应，但它被包装（或填充）在发出请求的网页上定义的 JavaScript 函数中。

// your response from your server
insertFormOnPage({"html":"<form action='#'><input name='name' /><input name='id' /></form>", "elem" : "#content"});

第三方客户端代码：

要使此技术起作用，第三方站点必须定义一个与您的服务器将返回的函数相匹配的函数：

function insertFormOnPage( data ) {

    alert( data.html ); // prints the HTML for debugging
    alert( data.elem ); // prints the selector you want to insert into

    // inject the HTML into the #content DIV
    $( data.elem ).html( data.html );
}

第三方网站上的 HTML：

<!-- Let's just assume the third party site's DIV is empty for simplicity -->
<div id="#content"></div

解释：

  • 您的服务器将纯 JavaScript 作为 JavaScript 返回到客户端，作为立即执行的函数。

  • 该函数接收以下项目作为 JavaScript 对象中的属性：HTML 和 div id。

  • 该函数访问对象的 html 和 elem 属性以访问 html 字符串和选择器。

  • 使用 jQuery，该函数将 HTML 注入到 DIV#content 元素中。

关于这项技术，你应该知道的最后一点也是最后一点是它只支持 GET 方法，因为这是从服务器获取 JavaScript 的方式。这意味着您需要确保您的服务器配置为接受对此数据的 GET 请求而不是 POST 请求。

使用 jQuery 的 JSONP：

虽然上述解决方案有助于描述幕后发生的事情的概念，但您可能还想查看jQuery getJSON。具体来说，查看 JSONP 示例，这是在不重新加载页面的情况下发出跨域请求的唯一方法。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });
于 2012-05-25T02:46:38.517 回答