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

Question

我目前带来了形式进入一个div像这样：

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

我需要的结果在#M div来显示，目前它带我到转换器/ 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>