jQuery发布帖子请求并检索结果

Question

所以我有一个测试输入和一个提交按钮。我想通过jQuery发送数据并从post请求中检索结果，然后显示post请求返回的值，而不刷新页面。

这是我的HTML：

<div id="middle">
    <form id="searchForm" action="/">
        <input placeholder="E.g. http://www.google.co.nz" id="url" type="text" name="forward_to"/>
        <input id="button" type="submit" name="shorten" value="Go"/>
    </form>

    <div id="result"></div>

</div>

这是我的php

if($query) {
    print("<div id='content'>http://www.website.co.nz/u/$short</div>");
} else {
    print("<div id='content'>Error</div>");
}

有没有这样做？

Answer 1

$(document).ready(function(){
    $('#button').click(function(e){
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '/',
            data: { query:  $('#url').val() },
            success: function(data) {
               $("#result").html(data);
            },
            error: function() {
              $("#result").html("Some error occurred.");
            }
        });
    });
});