Question

尝试使用表单练习AJAX。

我不确定我是否设置正确。

我想要做的是，当你点击提交时，会有一条消息说“你选择的号码是＃” - 你从下拉列表中选择的数字。

当我点击提交时，它会打开一个错误页面...所以显然有些错误。不确定是否还需要一个功能？我基本上试图从CodeSchool复制一个场景：）

编辑：提前谢谢！

******HTML*******
<form action="/echo/html" method="POST">
  <select>
    <option>1</option>
    <option>2</option>
  </select>
  <input type="submit" value="submit"/>
</form>
<div></div>


******JAVASCRIPT*******
function test() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
      $.ajax('/echo/html/', {
        type: 'POST',
        data: form.serialize(),
        success: function(result) {
          $('div').html('you chose ' + result);
       }
    });
  });
};

$(document).ready(function() {
  test();
});

Answer 1

测试后你不需要扩展名（.php）吗？ - 也就是说正确的路径 - 如果它在同一个目录中，则不需要＆＃34; /＆＃34;字符。

$.ajax('/test.php',...

另外 - 假设您将拥有其他表格和div - 最好通过ID，类或名称识别每个表格并正确定位它们，并且不要忘记在输入元素上添加名称，否则它们将无法访问作为形式元素。

******HTML*******
<form name="testForm" action="/test.php" method="POST">
  <select name="testSelect">
    <option>1</option>
    <option>2</option>
  </select>
  <input type="submit" value="submit"/>
</form>
<div id="testDiv"></div>


******JAVASCRIPT*******

$(document).ready(function() {
  $('[name=testform]').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
      $.ajax('/test.php', {
        type: 'POST',
        data: form.serialize(),
        success: function(result) {
          $('#testDiv').html('you chose ' + result);
          }
        });
     });
});

Answer 2

你的小提琴按预期工作！这是发生了什么。

Javascript正在挂接到您的表单上，并在提交时阻止它执行正常操作（转发到action=中的URL，表单字段为数据）
用户点击表单中的提交按钮
表单不会正常提交，但您的javascript会接管。
您的javascript向/test发送了一个AJAX请求 - 该请求来自javascript，而不是表单字段action=。
jsfiddle的服务器尝试提供/test的内容，这些内容已配置为发回错误
您的javascript会收到该错误的内容并查找与之相关的内容。您还没有配置错误对象，因此它会丢弃错误。

尝试将您的功能test()编辑为以下内容：

function test() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
      $.ajax('/test', {
        type: 'POST',
        data: form.serialize(),
        success: function(result) {
          $('div').html('you chose ' + result);
       },
       error: function(result) {
            alert("an error!");
       }
    });
  });
};

您将看到您从jsfiddle收回错误。

在您的实际环境中，您需要的是服务器端脚本来执行某些操作。如果您将AJAX请求发送到test.php，代码会将表单变量传递给服务器上托管的test.php，test.php将对这些变量执行某些操作并返回内容。

请记住，AJAX是一种与服务器进行通信的方式，而不仅仅是更新页面的一部分。您获取信息，将其发送到服务器脚本，服务器脚本使用该信息执行某些操作，将修改后的数据发送回浏览器，然后使用该数据执行某些操作。

Ajax - jQuery + HTML表单 - 一旦提交，就无法显示表单中的选定选项

2 个答案: