Question

我正在尝试在这里做一些Ajax和jQuery，在同一页面上提交表单。我阅读了以下主题以开始我想做的事情（由几个很好的例子组成）：jQuery AJAX submit form

这是我的HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>jQuery File Tree Demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="jquery.js" type="text/javascript"></script>
        <script src="addTag.js" type="text/javascript"></script>
    </head>

    <body>
            <form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
                    <legend>Add a tag</legend>
                    <input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
                    <input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
                    <input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
                    <button type="submit" id="button_save_tag">Add</button>
            </form>     
    </body>

</html>

JS文件：

$("form_addtag").submit(function(e) {
  e.preventDefault();
  var url = "add_tag.php"; // the script where you handle the form input.
  $.ajax({
    type: "POST",
    url: url,
    data: $("form_addtag").serialize(), // serializes the form's elements.
  });
});

执行是完美的：我可以填写表单，单击“提交”按钮，它会将所有字段传递给add_tag.php。但是，我总是在mydomain.com/add_tag.php上结束，而我想留在第一页。

Answer 1

您的选择器不正确：

$("#form_addtag").submit(function(e) {

您需要前导#表示您要按“id”搜索元素。没有它，你告诉jQuery为它可以找到的每个<form_addtag>元素添加一个事件处理程序，这当然是一个空列表。

这是jQuery的一个重要障碍，图书馆不会将此类情况视为错误。它不可能真的，因为这会让生活变得更加困难，但它仍然会让每个人都时不时地感到痛苦。

在这种情况下，您可以从表单中删除“action”属性，但这意味着如果没有JavaScript，页面将无法正常工作。

Answer 2

有两个问题。

你的jQuery需要在页面上引用的元素存在之后执行，通常是将代码放在关闭的body标签之前，或者它应该包含在文件的头部中。页面使用：

$( document ).ready(function() { // your code here;} );
您在表单选择器上缺少#。它应该是：$("#form_addtag")

使用JQuery阻止重定向 - 我做错了什么？

2 个答案: