Question

将帖子发布到同一页面嗨我正在使用jquery但问题是我无法在这样的按钮上加载提交的部分页面！

我有以下表格

<form name="loginform" id="loginform">
<input type="text" name="isname" id="isname">
<select name="hi" id="hi">
<option value=1">Yes</option>
<option value=1">No</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>

现在我担心的是当我填写数据并单击“提交”按钮时，我有以下

在表单下声明，我希望提交应该在下表中加载数据，其中包含id＆＃34; loaddata＆＃34;并且页面不应该刷新

由于

好吧，我试着用AJAX化表单：

但它仍然没有给我看任何东西！

具有id =＆＃34; loaddata＆＃34;＆gt;的表格是在同一页面和内部，我需要包括任何文件，如我正在进行处理

Answer 1

你可以AJAX化表单：

$(function() {
    $('#loginform').submit(function(evt) {
        evt.preventDefault();
        $.ajax({
            url: this.action, // make sure you set an action attribute to your form
            type: 'POST',
            data: $(this).serialize(),
            success: function(result) {
                $('#loaddata').html(result);
            }
        });
    });
});

现在提交表单时，它会向给定的服务器端操作发送一个AJAX请求，并将结果注入#loaddata容器。

Answer 2

<form name="loginform" id="loginform">
<input type="text" name="isname" id="isname">
<select name="hi" id="hi">
<option value=1">Yes</option>
<option value=1">No</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>

使用jquery ajax发布表单并使用append，appendTo或after

加载所需的结果

$(function(){
$("#button").click(function(e){
    e.preventDefault(); //prevent the default submission of the form
    $.ajax({
    url:'/path/to/server.php',//or an ActionResult what ever server side you are using
    data:{data:$("#loginform").serialize()},
    type:'POST',
    success:function(response){//success event handler, fires in case of success of ajax request
    $("#loaddata").append(response);
    },
    error:function(jxhr){ //error handler, fires if some error occurs
    console.log(jxhr.responseText);
    }
    });
 });
});

表单数据发布到同一页面

2 个答案: