为什么 AJAX 不适用于我的本地答案

【问题标题】：Why AJAX doesn't work on my local为什么 AJAX 不适用于我的本地
【发布时间】：2013-08-28 09:58:22
【问题描述】：

我一直在关注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">

在 body 处制作了一个简单的片段

<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
小服务程序

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>

结果图片

【问题讨论】：

您是否将您的 servlet 映射到 /TestProject/？您将无法通过命令行使用doPOST() 测试 servlet（它们是不同的 HTTP 请求类型）
你的 servlet 在 web.xml 中的名称更新了吗，你的类也位于一个包中吗？
我在我的 servlet 中使用注解 @WebServlet( "/update" )
好的，你能告诉我当你点击提交按钮时会发生什么，在浏览器中显示控制台的输出，以了解服务器中是否存在 404 错误或 500 内部错误
我更新了问题查看 web xml 和图像，我删除了我的注释并在 web xml 中设置了它

标签： java jquery ajax json servlets

【解决方案1】：

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

来自 Jasoon Sperske 的评论：

data: $('#updateUsername') 还需要一个值和名称，例如：data:{username: $('#updateUsername').val()}

【讨论】：

另外，data: $('#updateUsername') 需要一个值和名称，例如：data: {username: $('#updateUsername').val()}
实际上仔细检查我认为您需要调用$('#updateUsername').serialize()，因为选择器就是表单本身。
我尝试了数据：username: $('#updateUsername').val()，但帖子仍然不起作用
我也试过 $('#updateUsername').serialize() 但也不起作用
@newbie 你确定你是在请求正文中传递参数而不是作为 URL 的一部分吗？

【解决方案2】：

我猜 dataType: 'jason' 应该是 dataType: 'json'

【讨论】：

【解决方案3】：

可能是下一行中的“，”吗？

$('#displayName'),slideDown(500);

【讨论】：

还可以查看其他答案。他们指出了代码的其他几个问题。