javascript - 如何在 div 中显示表单的结果？

Question

我目前正在像这样将一个表单放入一个 div 中:

$('#m').load('http://example.com/converter/index.php #converty');

我需要在#m div 中显示结果，目前它会将我带到 converter/index.php 页面，感谢任何帮助!加载的表单:

<form action="/converter/index.php" method="post" id="conversionForm" style="display: block;">
**do stuff**
</form>

仅供引用:带有脚本的页面位于根域，而转换器位于文件夹 example.com/converter 目录中。

Answer 1

通过在表单元素上使用 .submit 方法阻止表单提交的默认行为，然后使用 .serializeArray 收集表单数据并执行您需要的操作用它来做。

这是一个例子。

$( "form" ).submit(function( event ) {
  var formData = $( this ).serializeArray();
  $.each(formData, function(i, item) {
    var $p = $("<p>");
    $p.text(item.name + ": " + item.value);
    $("#output").append($p);
  })
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<form method="get" action="foo.php">
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>