Question

<form>
  <select name="select-1">
    <option value="option-1">Option 1</value>
    <option value="option-2">Option 2</value>
  </select>
<button type="submit">Submit</button>
</form>

我有一个表单，当单击该按钮时，它会填充一个带有来自Ajax请求的html内容的div而没有任何页面重新加载（它在后端完成，不能说更多因为它不是我的专业领域）。单击提交按钮时，它按预期工作，但我想要的行为是，当表单选择了一个选项时，Ajax请求会自动触发，而无需按下按钮。

  $(document).on(
    "change",
    "select[name=select-1]",
    function(e) {
      if ($(this).val()) {
        $(document)
          .find("form")
          .submit();
      }
    }
  );

这里的问题是表单提交并重新加载页面，而不是触发Ajax请求。我还试图触发按钮本身的点击事件：

  $(document).on(
    "change",
    "select[name=select-1]",
    function(e) {
      if ($(this).val()) {
        $(document)
          .find("button")
          .click();
      }
    }
  );

..但没有任何反应。

Answer 1

// try something like this, as suggested by @Anjana. try to submit form data 
// using ajax.

$(document).on(
    "change",
    "select[name=select-1]",
    function(e) {
      if ($(this).val()) {
        var formData = new FormData();
        formData.append("select-1", $(this).val());
        $.ajax({
          url: {your url},
          method: "post", 
          data: formData,
          success: function(data) {
            div.innerHTML = data;
          }
        });
      }
    }
  );

Answer 2

在我看来，如果你使用的是AJAX，你应该对form造成麻烦。你只需要一些东西来触发通话。这可以只是一个按钮。

<select id="menu" name="select-1">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
</select>
<button type="submit">Submit</button>

在选择菜单中选择用户选择的值：

const selection = $( "#menu option:selected" ).text();

然后使用jQuery提供的$.ajax()函数：

$(document).ready(function() {
  $('#submit').click(function() {
    $.ajax({
      type: "POST",
      url: "<CHANGE HERE>",
      data: { selection: selection },
      dataType: "json"
    });
  });
});

Answer 3

您已使用按钮类型=＆＃34;提交＆＃34;，这会使页面重新加载。因此，从按钮中删除类型提交并使用ajax或使用e.prevent default（），如

$("form").submit(function(e) {
    e.preventDefault();
    $.ajax({
          url: url, //type your url,
          method: "post", 
          data: data,
          success: function(data) {

          },
          error: function(data){

          }
});

当您在更改事件上提交表单时进行更改后，它将触发Ajax请求并按预期工作。

了解有关Ajax的更多信息here

Answer 4

首先，您使用的jQuery代码不是AJAX，您可以从他们的文档中了解有关jQuery和AJAX的更多信息：

http://api.jquery.com/jquery.ajax/

以下是您问题的解决方案：

<!--HTML CODE-->
<form>
      <select name="select-1">
        <option value="option-1">Option 1</value>
        <option value="option-2">Option 2</value>
      </select>
    <button type="submit">Submit</button>
</form>

这是实际使用AJAX的jQuery代码。

选择器用于获取<select></select>，然后我们设置一个事件监听器，以便在对象更改时进行监听。

UPDATE：现在允许您将事件侦听器附加到动态创建的元素

$(document).ready(function() {
    $(body).on('change', "select[name=select-1]", function() {
        $.ajax({
            url: "https://example.com",
            method: 'GET',
            data: {"id": 123, "value": $('select[name=select-1]').val()}
        })
        .done(function (){
            alert("success");
        })
        .fail(function (){
            alert("error" + $('select[name=select-1]').val());
        });
    })
});

您可以更改AJAX中的网址，以及使用GET或POST的方法以及要发送到网址的数据。

之后，如果AJAX请求成功，将执行.done（）部分中的代码。

同样，如果请求失败，将执行fail（）中的代码。

Ajax请求不会在表单更改时自动触发

4 个答案: