Ajax-jQuery+；HTML表单——Can'；t提交后显示表单中的选定选项_Jquery_Html_Ajax

Ajax-jQuery+；HTML表单——Can'；t提交后显示表单中的选定选项

jquery html ajax

Ajax-jQuery+；HTML表单——Can'；t提交后显示表单中的选定选项,jquery,html,ajax,Jquery,Html,Ajax,尝试使用表单练习AJAX 我不确定我是否把它设置好了我想做的是，当你点击submit时，会有一条消息说“你选择的号码是”—无论你从下拉列表中选择了什么号码当我点击提交时，它会打开一个错误页面。。。所以很明显有些地方出了问题。不确定是否需要函数？我基本上是在尝试复制CodeSchool的一个场景：）编辑：提前谢谢 ******HTML******* <form action="/echo/html" method="POST"> <select> <

尝试使用表单练习AJAX

我不确定我是否把它设置好了

我想做的是，当你点击submit时，会有一条消息说“你选择的号码是”—无论你从下拉列表中选择了什么号码

当我点击提交时，它会打开一个错误页面。。。所以很明显有些地方出了问题。不确定是否需要函数？我基本上是在尝试复制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();
});

*******HTML*******
1.
2.
******JAVASCRIPT*******
功能测试（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
变量形式=$（此）；
$.ajax（“/echo/html/”{
键入：“POST”，
数据：form.serialize（），
成功：功能（结果）{
$（'div'）.html（'您选择了'+结果）；
}
});
});
};
$（文档）.ready（函数（）{
test（）；
});

测试后是否不需要扩展（.php）？-另外，这是正确的路径-如果它在同一个目录中，yuo将不需要“/”字符

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

另外，假设您有其他表单和div，最好通过id、class或name来识别每个表单和div，以正确地定位它们，并且不要忘记在输入元素上加上名称，否则它们将无法作为表单元素访问

******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);
          }
        });
     });
});

*******HTML*******
1.
2.
******JAVASCRIPT*******
$（文档）.ready（函数（）{
$（'[name=testform]'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
变量形式=$（此）；
$.ajax（“/test.php”{
键入：“POST”，
数据：form.serialize（），
成功：功能（结果）{
$（'#testDiv'）.html（'您选择'+result'）；
}
});
});
});

测试后是否不需要扩展（.php）？-另外，这是正确的路径-如果它在同一个目录中，yuo将不需要“/”字符

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

******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);
          }
        });
     });
});

*******HTML*******
1.
2.
******JAVASCRIPT*******
$（文档）.ready（函数（）{
$（'[name=testform]'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
变量形式=$（此）；
$.ajax（“/test.php”{
键入：“POST”，
数据：form.serialize（），
成功：功能（结果）{
$（'#testDiv'）.html（'您选择'+result'）；
}
});
});
});

您的小提琴按预期工作！下面是正在发生的事情

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!");
       }
    });
  });
};

您将看到从JSFIDLE返回了一个错误

在实际环境中，您需要的是一个服务器端脚本。如果将AJAX请求发送到

test.php

，代码将把表单变量传递到服务器上托管的test.php，test.php将处理这些变量并返回内容

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