0

我将此 HTML 表单保存为file-001.php：

<form action="file-001.php" method="post" id="select-block" class="general-form">
<input class="clearme" name="Title" value="Title" />
<input type="submit" class="submit-btn" value="SAVE" />
</form>

这个表单过程在同一个文件上提交了变量。但这个文件file-001.php实际上由 jQuery 加载调用并位于选项卡框：

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[name="block-type"]').val();
    file = file.substring(file.length - 3);
    self.next(".manage-content-wrap").find(".manage-content").load("file-001.php");
    e.preventDefault();
});

但是，当我单击“提交”按钮时，此表单会将我重定向到http://example.com/file-001.php的单个页面

如何使“动作”结果仍然在同一个选项卡框内。没有从盒子里重定向出来？

4

2 回答 2

1

您可以通过ajax提交表单

由于初始页面加载代码运行时页面中不存在表单，因此请使用on()方法来说明未来的表单。

$(document).on('submit', '#select-block', function() {

    var data = $(this).serialize();
    var actionUrl = $(this).attr('action');

    $.post(actionUrl, data, function(response) {
        /* do something when form submittal completed*/            
    })

    return false; /* prevent browser default submit and redirect*/
});

API 参考：

http://api.jquery.com/jQuery.post/

http://api.jquery.com/on/

于 2012-10-27T10:35:02.943 回答
1

您可以使用 AJAX 完成此操作。

5种方法你可以做到：

  1. load()：从远程 URL 加载 HTML 并将其注入 DOM
  2. $.getJSON()：从远程位置检索 JSON
  3. $.getScript()：从远程位置加载 JavaScript
  4. $.get()：发出 GET 请求
  5. $.post()：发出 POST 请求

使用 POST 的示例：

//  $.post()  
    $("#post").click(function(){  
        $("#result").html(ajax_load);  
        $.post(  
            loadUrl,  
            {language: "php", version: 5},  
            function(responseText){  
                $("#result").html(responseText);  
            },  
            "html"  
        );  
    });

使用 GET 的示例：

//  $.get()  
    $("#get").click(function(){  
        $("#result").html(ajax_load);  
        $.get(  
            loadUrl,  
            {language: "php", version: 5},  
            function(responseText){  
                $("#result").html(responseText);  
            },  
            "html"  
        );  
    });

只是使用了一个 Div 来加载服务器端的内容。

“file-001.php 实际由 jQuery 加载调用并位于选项卡框” - 在选项卡内使用 div。

于 2012-10-27T10:36:58.310 回答