Ajax在发布表单后加载页面内容

时间:2012-09-14 02:46:13

标签: jquery

这是我的html页面:

<body>
    <div id="containt">
         <p>already have containt.</p>
    </div>
    <div id="other">
        <form id="test">
             <input id="sth" name="sth" value="123456"/>
             <div id="submit"></div>
        </form>
    </div>
<body>

和我的php脚本:“abc.php”

$happy['verymuch'] = $_POST['sth'];
include('needtogetcontent.php');//and then use extract() to extract $verymuch in "needtogetcontent.php"

“needtogetcontent.php”

<a href="<?=$verymuch?>"><?=$verymuch?></a>

现在我需要制作这样的html页面:

<body>
    <div id="containt">
         <p>already have containt.</p>
    </div>
    <div id="other">
         <a href="123456">123456</a>
    </div>
<body>

感谢您的帮助:D!

更新:我使用

$('#submit').click(function() {
    $.ajax({
        url: 'abc.php',
        type: 'POST',
        data: $('#test').serialize(),
        success: function(data){
            //data will return anything echo/printed to the page.
            //based on your example, it's whatever $happy is.
            $('#other').text(data);
        }
    });
    return false;
});

2 个答案:

答案 0 :(得分:0)

$('#test').submit(function(){
    $.ajax({
        url: 'abc.php',
        type: 'POST',
        data: 'sth='+$('#sth').val(),
        success: function(data){
            //data will return anything echo/printed to the page.
            //based on your example, it's whatever $happy is.
            $('#other').text(data);
        }
    });
    return false;
});

我没有看到提交按钮,所以我不确定这个过程是否真的有效。如果<div id="submit">是您点击提交表单的元素,那么我们会更改 - &gt;

$('#test').submit(function(){

$('#submit').click(function(){

答案 1 :(得分:0)

执行以下操作:

<强> HTML:

<body>
    <div id="containt">
         <p>already have containt.</p>
    </div>
    <div id="other">
        <form id="test">
             <input id="sth" name="sth" value="123456"/>
             <div id="submit">Submit</div>
        </form>
    </div>
<body>

jQuery代码:

$(document).ready(function() {

    $('#submit').click(function() {
        //get sth value
        var sth = $('#sth').val();
        //make ajax call to 'abc.php' passing 'sth' parameter
        $.post('abc.php', { sth:sth }, function(data) {
            //if $_POST['sth'] at PHP side is not null
            if (data != null) {
                //show the data (in this case: $happy) in the div with id 'other' using '.html()' method
                $('#other').html(data);
            }
        });
    });

});​