表单数据发布到同一页面

发布于 2024-12-05 07:26:56 字数 643 浏览 0 评论 0原文

表单发布到同一页面您好，我正在使用 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 为“loaddata”并且页面应不刷新

谢谢

，好的，我尝试 AJAXify 表单：

但它仍然没有向我显示任何内容！

id="loaddata"> 的表位于同一页面上，在其中我是否需要包含任何文件，例如我正在处理的位置

原文

form post to same page
Hi i am using jquery but issue is i am unable to load the partial page on submit on button like this!

i have the following form

<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>

Now my concern is when i fill the data and click the Submit button, i have the following

declared just under the form and i want the submission should load data in the following table which has id "loaddata" and page should not refresh

Thanks

ok, i tried to AJAXify the form:

but still it showed me nothing!

the table with id="loaddata"> is on the same page and inside it do i need to include any file like where i am doing the processing

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧竹 2024-12-12 07:26:56

您可以对表单进行 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 容器中。

You could AJAXify the form:

$(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);
            }
        });
    });
});

Now when the form is submitted it will send an AJAX request to the given server side action and will inject the result into the #loaddata container.

回复收藏 0 原文

初懵 2024-12-12 07:26:56

<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);
    }
    });
 });
});

<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>

use jquery ajax to post form and load the result where ever desired using append, appendTo or 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);
    }
    });
 });
});

回复收藏 0 原文

~没有更多了~