如何做一个简单的跨域AJAX调用，返回一个HTML页面

我看过几个网站，讨论使用AJAX跨域调用。他们似乎都过于复杂或具体。以下是我希望能够将请求参数发送到服务器上的特定JSP的简单html页面。如何做一个简单的跨域AJAX调用，返回一个HTML页面

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery AJAX POST Form</title> 
    <meta charset="utf-8"> 
</head> 
<body> 

<div id="response"> 
    <pre></pre> 
</div> 

<form id="my-form"> 
    <input type="text" id="userName" name="first-name" placeholder="User Name" /> 
    <input type="text" id="password" name="last-name" placeholder="Password" /> 

    <button type="submit">Submit</button> 
</form> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    (function($){ 
     function processForm(e){ 
      $.ajax({ 
       url: 'myserver.com:8080/myApp/user-login.jsp', 
       crossDomain: true, 
       dataType: 'html', 
       type: 'post', 
       contentType: 'application/x-www-form-urlencoded', 
       data: $(this).serialize(), 
       success: function(data, textStatus, jQxhr){ 
        $('#response pre').html(data); 
       }, 
       error: function(jqXhr, textStatus, errorThrown){ 
        console.log(errorThrown); 
       } 
      }); 

      e.preventDefault(); 
     } 

     $('#my-form').submit(processForm); 
    })(jQuery); 
</script> 
</body> 
</html>

我可以从一个简单的网页，不使用jQuery或AJAX，例如，在浏览器中做到这一点：

http://myserver.com:8080/myApp/user-login.jsp?userName=bloaty&password=narf

我得到一个HTML页面显示，我已经登录。

当我尝试使用上述方法时，我得到的是不支持跨域查询。被调用的JSP将返回一个HTML页面。我在这里错过了什么？

来源

2017-02-26 John Wooten

给定的HTML页面的网址是什么？ –

什么是确切的错误？ – rckrd

JSP页面需要添加CORS头，如下所示：http://stackoverflow.com/q/20881532/101087 – NineBerry

我知道它太晚了，但可能是这一个将有助于某人。

$.ajax({ 
xhrFields: { 
    withCredentials: false 
     }, 
         url: 'gethtmlservlet?urlofjsp=myserver.com:8080/myApp/user-login.jsp', 
         type: 'post', 
         success: function(data, textStatus, jQxhr){ 
          cosnole.log(data); 
         }, 
         error: function(jqXhr, textStatus, errorThrown){ 
          console.log(errorThrown); 
         } 
        });

来源

2017-03-08 13:06:15

这是每个人都面临的非常常见的错误，但是这个错误的解决方案是Jsoup。首先使用Ajax调用&把我写在下面的ajax call和也servlet执行，你会得到整个页面的HTML代码后... 通过程序的URL在Ajax调用的URL调用servlet

<html> 
     <head> 
      <title>jQuery AJAX POST Form</title> 
      <meta charset="utf-8"> 
     </head> 
     <body> 

     <div id="response"> 
      <pre></pre> 
     </div> 

     <form id="my-form"> 
      <input type="text" id="userName" name="first-name" placeholder="User Name" /> 
      <input type="text" id="password" name="last-name" placeholder="Password" /> 

      <button type="submit">Submit</button> 
     </form> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script> 

      (function($){ 
       function processForm(e){ 
        $.ajax({ 
         url: 'gethtmlservlet?urlofjsp=myserver.com:8080/myApp/user-login.jsp', 
         type: 'post', 
         success: function(data, textStatus, jQxhr){ 
          cosnole.log(data); 
         }, 
         error: function(jqXhr, textStatus, errorThrown){ 
          console.log(errorThrown); 
         } 
        }); 
        e.preventDefault(); 
       } 
       $('#my-form').submit(processForm); 
      })(jQuery); 
     </script> 
     </body> 
     </html>

In servlet 如果您使用的是maven，那么在pom.xml中添加Jsoup的依赖关系，否则您可以相应地包含.jar文件。这out.println行发送html到ajax成功。现在打印htmldocument，它给你一个完整的html页面。现在，如果你想找到一些节点或元素，你可以使用下面的代码。
我想从html中找到iframe元素，所以我使用下面的代码，你可以写任何标签名称，你想找到。

import org.jsoup.Jsoup; 
    import org.jsoup.nodes.Document; 
    import org.jsoup.nodes.Element; 

    public class gethtmlservlet extends HttpServlet { 

    protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
       throws ServletException, IOException { 

      response.setContentType("text/html;charset=UTF-8"); 
      PrintWriter out = response.getWriter(); 

      try { 
      String jspurl = request.getparameter("urlofjsp"); 

      Document htmldocument = Jsoup.connect(jspurl).get(); 
       out.println(htmldocument); 
      Elements iframe = productdocument.select("iframe"); 

       } 
       catch(Exception e) 
       { 
       System.out.println(e); 
       } 
      } 
     }

来源

2017-02-28 10:18:00

请注意，它不是我的servlet，也不在我的服务器上。我相信我需要将HTML取回并作为一个字符串捕获，然后“剪切”出我需要的东西，然后用从其他提要中捕获的数据进行汇编，并创建我的聚合。 –

如何做一个简单的跨域AJAX调用，返回一个HTML页面

回答

相关问题