为什么AJAX不能在我的本地工作

时间:2013-08-26 00:49:58

标签: java jquery ajax json servlets

我一直关注AJAX Tutorial并且我做了同样的事情,但我不知道为什么它对我不起作用。这就是我所做的。

的index.jsp
在标题处我放置了一些源脚本

<script src="../javascript/jquery-1.10.2.js"></script>
<script src="../javascript/basic.js"></script>
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen">

并在身体上制作一个简单的snippnet

<p class="large">Test AJAX</p>
    <form id="updateUsername">
        <label for="username">What is your name?</label>
        <input type="text" name="username" id="username" />
        <input type="submit" />
    </form>
<p id="displayName" />

basic.js
ajax的代码

$(document).ready(function(){
    $('#updateUsername').submit(function(){
        $.ajax({
            url: 'update',
            type: 'post',
            dataType: 'jason',
            data: $('#updateUsername'),
            success: function(data){
                if(data.isValid){
                    $('#displayName').html('Your name is: ' + data.username);
                    $('#displayName').slideDown(500);
                }
                else {
                    alert('Please enter a valid username !!');
                }
            } 
        });

        return false;
    });
});

UpdateUsername.java
servlet

Map<String, Object> map = new HashMap<String, Object>();
        boolean isValid = false;
        String username = request.getParameter( "username" );
        if( username != null && username.trim().length() != 0 )
        {
            isValid = true;
            map.put( "username", username );
        }
        map.put( "isValid", isValid );
        write( response, map ); // WRITE METHOD

最后是来自servlet的write方法

response.setContentType( "application/json" );
        response.setCharacterEncoding( "UTF-8" );
        response.getWriter().write( new Gson().toJson( map ) );

在我适合我之前,我需要一些设置吗?当我测试它时,网址就像http://localhost:8080/TestProject/?username=test,似乎POST不起作用。我错过了什么吗?

更新
我已从$('#displayName'),slideDown(500);更改为$('#displayName').slideDown(500);

顺便说一下,我确实将charset和其他一些更改为UTF-8。在index.jsp

的最顶层

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

并在头部<meta charset="utf-8">

web.xml

<servlet>
<servlet-name>UpdateUsername</servlet-name>
<servlet-class>com.ajax.servlets.UpdateUsername</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UpdateUsername</servlet-name>
<url-pattern>/update</url-pattern>
</servlet-mapping>

结果的图像 Image result

3 个答案:

答案 0 :(得分:0)

首先,http://localhost:8080/TestProject/?username=test看起来不像是POSTPOST请求不会将请求参数作为URL的一部分发送。如果你想发送POST,并发送一些参数,那么你需要将params作为正文的一部分发送。

来自Jasoon Sperske评论:

同样data: $('#updateUsername')需要一个值和名称,如:data:{username: $('#updateUsername').val()}

答案 1 :(得分:0)

我猜数据类型:'json'应该是dataType:'jsonp>

答案 2 :(得分:0)

可能是以下行中的“,”吗?

$('#displayName'),slideDown(500);
相关问题