Question

我正在使用JQuery / AJAX和Spring MVC构建Web应用程序。

我有一个html水平菜单，如下面

<div id='cssmenu'>
<ul>
   <li class='active'><a href='${pageContext.request.contextPath}/add' class="navlink"><span>Add </span></a></li>
   <li><a href='${pageContext.request.contextPath}/update' class="navlink"><span>Update </span></a></li>
   <li><a href='${pageContext.request.contextPath}/delete' class="navlink"><span>Delete </span></a></li>
   <li><a href='${pageContext.request.contextPath}/deleteAll' class="navlink"><span>Delete All s</span></a></li>
</ul>
</div>
    <div id="endpoint" style="border:1px" >
      <form action="${pageContext.request.contextPath}/setEndPoint"
                  id="epform" method="post" >
      <p><label for="endPoint"> Set Endpoint: </label>
            <input id="endPoint" type="text" name="endPoint" size="75"/>
            <input value="Save" class="button" id="epsave" type="submit"/></p>
      </form>
      <p><span style="width:75"></span></p>
</div>
<div id='content' style="margin-top: 1cm;"></div>

然后，我有一个JQuery函数，它从服务器获取相应HTML页面的JQuery，并将结果加载到#content div中。

我有一个额外的文本字段，其值，我需要保存到其中一个弹簧控制器中的会话。文本字段值也是相应URL的ajax帖子，如下所示：

我到目前为止的JQuery脚本如下所示

<script>
$(document).ready(function(){

      $('.navlink').click(function(e) {
            $("#cssmenu .active").removeClass("active");
            $(this).parent().addClass("active");
            e.preventDefault();
            $('#content').load( $(this).prop("href"));
            return true;
      });


$( "#epsave" ).bind("click", function(event){
      alert("Ajaxing ... ");

      event.preventDefault();

      $.ajax({
            url: $( this ).attr("action"),
            type: "POST",
            data: $( "#epform" ).serialize(),
            success: function(resp) {
                  console.log("What Respone?: " + resp);
                  $( "span" ).empty();
                  $( "span" ).text(resp).show();
            },
            error: function(err) {
                  $( "span" ).empty();
                  $( "span" ).text(err).show();
            }
      });
});
});
</script>

.navlink工作正常，它显示链接的页面，但#epsave功能不起作用。 #epsave的ajax帖子没有将请求发布到服务器。 html导航菜单本身会多次显示。我究竟做错了什么？请帮忙！

Answer 1

您必须处理submit事件而不是click。试试这段代码：

$( "#epform" ).submit(function(event){

  console.log("Ajaxing ... ");

  event.preventDefault();

  $.ajax({
        url: $( this ).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        success: function(resp) {
              console.log("What Respone?: " + resp);
              $( "span" ).empty();
              $( "span" ).text(resp).show();
        },
        error: function(err) {
              $( "span" ).empty();
              $( "span" ).text(err).show();
        }
  });

});

Answer 2

在您的点击处理程序$(this)中是单击的按钮，而不是表单标记。因此action上没有$(this)属性。变化

url: $( this ).attr("action"),

到

url: $( this ).parent().attr("action"),

在document.ready中使用JQuery多个事件处理程序

2 个答案: