Question

这是我的JSP代码。我做了ajax查询，但它没有工作，这意味着我在成功注册后没有在同一页面上获得结果。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"%></script>
<script type="text/javascript"/>
    function post()
     {
    var FirstName = document.getElementByName("FirstName").value;
    var Lastname = document.getElementByName("Lastname").value;
    var Email_Id = document.getElementByName("Email_Id").value;
    var Gender = document.getElementByName("Gender").value;
    var Comments = document.getElementByName("Comments").value;
    if(FirstName && Lastname && Email_Id && Gender && Comments)
    {
        $.ajax
        ({
            type: 'post',
            url: 'RegisterServlet.java',
            data:
        {
            user_FirstName:FirstName,
            user_Lastname:Lastname,
            user_Email:Email_Id,
            user_Gender:Gender,
            user_Comments:Comments
        },
        success: function (response)
        {
            document.getElementByName("insert").innerHTML="Form Successfully Registerd";
        }


        })  
        }
    return false;
    }
</script>

<body>
<form action="register" method="post">

        FirstName:*<input type="text" name="FirstName" required="required" /><br/>
        Lastname:*<input type="text" name="Lastname" required="required" /><br/>
        Email_Id:*<input type="text" name="Email_Id" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required="required"  /><br/>

        Gender:<select name="Gender">
            <option>Male</option>
            <option>Female</option>
        </select> <br/>
        Comment:*<input type="text" name="Comments" required="required"/><br/>
        <input type="submit" value="Submit" name="insert"/>

    </form>
</body>
</html>

我想在同一页面上打印成功消息而不重新加载新消息。我是否还需要在servlet文件中更改某些内容？

Answer 1

您实际上从未使用ajax代码调用post函数或停止加载注册页面。

如果您调用了post函数，然后检查了控制台，您可能会看到类似Uncaught TypeError: document.getElementByName is not a function的内容，因为函数是getElementsByName（注意s），它返回需要采取的元素列表考虑到了由于您正在使用jQuery，因此您只需在表单上使用.serialize()即可获取其字段数据。

$(document).ready(function(){

    $('form').submit(function()
    {
        $.ajax
        ({
            type: 'post',
            url: 'RegisterServlet.java',
            data: $(this).serialize(),
            success: function (response)
            {
                document.getElementsByName("insert")[0].innerHTML="Form Successfully Registerd";
            }
        }); 
        return false;
    });
});

我试图在java servlet表单中使用ajax查询在同一页面上打印结果

1 个答案: