Question

处理返回json响应的表单帖子的最佳做法是什么？我们正试图在我们网站的移动版本中重用一些返回JSON的代码，我不确定处理javascript的最佳方法。我想填充一个对话框。我是否真的必须在表单标记上将data-ajax设置为false并改为调用$ .post？

谢谢，罗布

Answer 1

是的，为了在jQuery Mobile中处理表单提交，您必须将data-ajax="false"添加到表单标记，以便jQuery Mobile框架不会为您处理它。然后，您可以为submit事件设置自己的处理程序：

//add event handler to your form's submit event
$('form').on('submit', function (e) {
    var $this = $(this);

    //prevent the form from submitting normally
    e.preventDefault();

    //show the default loading message while the $.post request is sent
    $.mobile.showPageLoadingMsg();

    //send $.post request to server, `$this.serialize()` adds the form data to the request
    $.post($this.attr('action'), $this.serialize(), function (response) {

        //you can now access the response from the server via the `response` variable
        $.mobile.hidePageLoadingMsg();
    }, 'json');//you can set the response data-type as well
});

以下是$.post()的文档：http://api.jquery.com/jquery.post/

注意：正在使用.on()代替折旧的.bind()函数：http://api.jquery.com/on/

Answer 2

您可能希望向Jasper的示例中添加.error（）处理程序，否则如果jquery或服务器端出现错误，您的加载消息将保持在最顶层，直到用户刷新页面可能会导致很多他输入的数据。

//add event handler to your form's submit event
$('form').on('submit', function (e) {
    var $this = $(this);

    //prevent the form from submitting normally
    e.preventDefault();

   //show the default loading message while the $.post request is sent
    $.mobile.showPageLoadingMsg();

    //send $.post request to server, `$this.serialize()` adds the form data to the request
    $.post($this.attr('action'), $this.serialize(), function (response) {

        //you can now access the response from the server via the `response` variable
        $.mobile.hidePageLoadingMsg();
    }, 'json') //you can set the response data-type as well
    .error(function(e) {
        $.mobile.showPageLoadingMsg();
        console.log('my_function_name, ' + e.responseText); 
    });
});

Answer 3

这篇文章会帮助你吗？

http://www.giantflyingsaucer.com/blog/?p=2574

也许你可以解释一下，你是什么意思“我真的必须在表格标签上将data-ajax设置为false”吗？如果你想保留AJAX方式，我认为你必须使用例如$ .post或$ .ajax处理表单POST（参见示例）

jQuery mobile和JSON发布回复

3 个答案: