当我在文本框中输入值并点击提交时，我希望使用ajax在文本框下方输入该值

When i enter value into textbox and hit submit i want that value below the textbox using ajax

本文关键字：文本 输入 ajax 方输入 提交 我希望      更新时间：2023-09-26

Welcome.jsp

这是我的jsp页面。当我在文本框中输入一个值并点击回车键时，我希望名称与<p>标记一起显示。我是ajax的新手。请帮我做这件事，我们可以把模型发送到ajax吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<title>Insert title here</title>
</head>
    <script>
            function ajaxCall()
            {
                //alert("in js");
                $.ajax({
                            type: "GET",
                            url: "/welcomePage",
                            data: "name=" + $('#name').val(), 
                            success: function(data)
                            {
                                alert("success !"); 
                                $('#show').html(data);
                            },
                            error: function()
                            {
                                alert("Error");
                            }
                });
                return false;
            }
    </script>
<body>
    <h2 align="center">Welcome to Spring MVC</h2>
    <form>
        <input type="text" name="name" />
        <input type="submit" value="submit" onclick="ajaxCall();"/>
    </form>
    <p>Your name is</p><div id="show"></div>
</body>
</html>

DemoController.java

package com.demo.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller 
public class DemoController {
        @RequestMapping(value="/welcomePage" , method=RequestMethod.GET)
        public @ResponseBody String showPage(
                HttpServletRequest request,
                HttpServletResponse response)
        {
            String name = request.getParameter("name");
            /*ModelAndView model = new ModelAndView("Welcome");
            model.addObject("name",name);
            System.out.println("Name is:"+name);*/
            return name;
        }
}

表单中的提交类型按钮将表单提交到其操作url，如果未指定url，则会重新加载当前url。当表单提交当前页面上下文（DOM、CSS、JS）被破坏时，简而言之，当表单提交时，对当前页面无法执行任何操作。

你所需要做的就是阻止表单提交

要做到这一点，您可以将false返回到它的onsubmit事件，如下面的

<form onsubmit="return false;">
    <input type="text" name="name" />
    <input type="submit" value="submit" onclick="ajaxCall();"/>
</form>

从外观上看，其他一切都是正确的，所以在你做出这个简单的改变之后，它应该会起作用。

相关文章：