如何做一個簡單的跨域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頁面

回答

相關問題