Question

我正在尝试实现一个简单的Jquery下拉列表。

HTML

<h2> Networked Graphs</h2>
<p> Select the node ID from the drop down to see graphs up to a depth of 5 </p>
<form id="my form">
  <label for="Node_type">Node_Type</label>
  <select id="dropdown_change">
    <option value="Customer">Customer</option>
    <option value="Phone">Phone</option>
    <option value="ID_Card">ID_Card</option>
  </select>
  <input type='submit' value='Submit'>
</form>

这是jquery代码：

var selectID = $("#dropdown_change").val();
$.ajax({
  type: "POST",
  url: '/echo/html/',
  data: {
    html: "<span>This is the ajax response...</span>",
    delay: 2
   },

   success: function(data) {
     showMsg('SUCCESS: ' + data);
   },

   error: function (xhr, textStatus, errorThrown) {
     document.getElementById('dropdown_change').selectedIndex = 0;
     showMsg('ERROR: ' + errorThrown);
     return false;
   }
});

})  // closes ?

从下拉列表中选择并单击提交按钮应显示成功消息'SUCCESS：这是Ajax响应'。

即使我指定“type：POST”和 SUCCESS 以及 ERROR 消息，它也会失败并显示以下错误：

{“error”：“请使用POST请求”}

这是Jsfiddle。试着学习javascript / jquery。

Answer 1

jQuery Ajax在页面加载后立即运行。单击按钮时不会运行。单击该按钮时，正在提交HTML表单。

执行此操作的方法是向按钮添加一个侦听器，该按钮拦截提交并调用jQuery Ajax。它看起来像这样：

CommandLineRunner#run

这是一个有效的fiddle

Answer 2

在jquery 1.9.0之后，你应该使用

method: "POST"

而不是

type: "POST"

Link

使用jquery下拉列表

2 个答案: