2012-02-03 105 views
0

我想使用jquery和jsp调用ajax,但是我无法让它工作。Ajax请求没有到达servlet

<%@page import="in.isuru.twitter.Twits" %> 
<%@page import="java.util.ArrayList" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title>Twitter Sinhala</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script src="script.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <form id="form" action="twitterv2" method="post"> 
      Enter Something 
      <input id="term" type="text" name="term" /> 
      <input id="submit" type="submit" value="Show results" name="submit"/> 
     </form> 
     <p id="result"></p> 
    </body> 
</html> 

这是servlet。

package in.isuru.twitter; 

import java.io.IOException; 
import java.util.ArrayList; 

import javax.servlet.http.*; 

import twitter4j.Query; 
import twitter4j.QueryResult; 
import twitter4j.Tweet; 
import twitter4j.Twitter; 
import twitter4j.TwitterException; 
import twitter4j.TwitterFactory; 

@SuppressWarnings("serial") 
public class TwitterV2Servlet extends HttpServlet { 

    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { 
     resp.setContentType("text/html"); 
     //Twits tweets = new Twits(); 
     Twitter twitter = new TwitterFactory().getInstance(); 
     //twitter.setOAuthConsumer(CONSUMER_KEY, CONSUMER_SECRET); 
     Query query = new Query("man"); 
     QueryResult result = null; 
     try { 
      result = twitter.search(query); 
     } catch (TwitterException e) { 
      e.printStackTrace(); 
     } 
     for (Tweet tweet : result.getTweets()) { 
      resp.getWriter().println(tweet.getFromUser() + ":" + tweet.getText() + " <br/>"); 
     } 
    } 

} 

这是的script.js

$(document).ready(function() { 
    $('#form').submit(function() { 
     var number = $('#term').val(); 

     $.ajax({ 
      type:  "post", 
      url:  "twitterv2", 
      data:  "term=" + term, 
      success: function(msg) { 
       $('#result').hide(); 
       $("#result").html("<h3>" + msg + "</h3>").fadeIn("slow"); 
      } 
     }); 

     return false; 
    }); 
}); 

这是web.xml中

<?xml version="1.0" encoding="utf-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> 
    <servlet> 
     <servlet-name>TwitterV2</servlet-name> 
     <servlet-class>in.isuru.twitter.TwitterV2Servlet</servlet-class> 
    </servlet> 
    <servlet-mapping> 
     <servlet-name>TwitterV2</servlet-name> 
     <url-pattern>/twitterv2</url-pattern> 
    </servlet-mapping> 
    <welcome-file-list> 
     <welcome-file>index.html</welcome-file> 
    </welcome-file-list> 
</web-app> 

我不能使它发挥作用。当我进入servlet页面并给出像 http://localhost:8888/twitterv2?term=people这样的参数时,它显示Twitter帖子。所以在servlet中没有错误,我认为问题在script.js中。但是我找不到一个错误。

+0

您是否使用过[firebug](http://getfirebug.com)或chrome的开发人员工具来检查响应并查看错误可能是什么? – ggreiner 2012-02-03 23:08:09

+0

从未使用过这样的工具。我觉得自己很宽松,这些类型的问题不是简单的问题吗? – Isuru 2012-02-03 23:17:46

回答

0
  1. 将您的输入类型更改为按钮。
  2. 创建一个函数并在按钮上点击它。
<input id="submit" type="button" value="Show results" onclick="submitForm()" name="submit"/> 

,然后创建一个功能..

<script> 
    function submitForm(){ 
     $.ajax({ 
      type:  "post", 
      url:  "twitterv2", 
      data:  "term=" + term, 
      success: function(msg) { 

       $('#result').hide(); 

       $("#result").html("<h3>" + msg + "</h3>") 
       .fadeIn("slow"); 
      } 
     }); 
    } 
</script> 
3

你发送阿贾克斯一个POST请求,但是你的servlet只接受GET请求。使用一个像样的浏览器集成的Web开发工具,如Firebug或Chrome中的内置浏览器(按F12),您应该已经注意到ajax请求返回了一个HTTP 405 方法不允许响应,它本身应该已经打开灯泡在你的头。

所以,解决你的问题,只是无论是doGet()方法的servlet重命名为doPost(),或让阿贾克斯发送GET请求代替。

你的脚本和servlet代码看起来一般很好。我做而不是建议按照其他答案者的建议重写它,那么您将完全失去优雅的降级(即,当最终用户禁用JavaScript时,表单将不会完全提交)。