jquery - 使用 jQuery 提示提交

Question

假设我有一个相当通用的 jQuery Prompt，它要求我重命名一个元素，然后告诉我输入的内容：

$(function () {
$("#rename").click(function () {
    jPrompt('Please Enter a New Name:', 'Enter new name...', 'Rename Prompt', function (r) {
        if (r) {
            alert('You entered ' + r);
        }
    });
});
});

但是我希望重命名的元素存储在服务器上的数据库中，这意味着我需要运行服务器端脚本来重命名这个元素。我假设这意味着我需要使用提交，就像在表单上一样。我在这里找到了一些关于 .submit() jQuery 函数的信息，但我并不完全理解它是如何工作的。如果有人可以让我知道我将如何提交然后运行服务器端脚本，那将不胜感激。

Answer 1

$(function () {
    $("#rename").click(function (e) {
        e.preventDefault();
        jPrompt('Please Enter a New Name:', 'Enter new name...', 'Rename Prompt', function (r) {
            if (r) {
                $('input[name="NewName"]').val(r.Name);
                $.post('@Url.Action("Edit", "TheController")', $('#hiddenform').serialize(), function(response) {
                    // response = ActionResult
                });
            }
        });
    });
});

1. 用于Url.Action获取正确的 URI
2. 使用 prevent default 来阻止默认操作
3. 从 MVC3 操作返回某种 JSON 以指示成功/失败。
4. 在某处隐藏<form>并填写要发布的信息

Answer 2

您需要使用 AJAX 将请求从 JavaScript 发送到服务器端脚本。查看关于 AJAX 的 jQuery API 文档以获取更多信息。

以下 jPrompt 回调将向服务器端脚本发出 HTTP POST 请求，并与请求一起传递id和newName参数。在 PHP 中，您可以使用$_POST['id']和检索这些内容$_POST['newName']。

function (r) {
    if (r) {
        $.post("rename.php", {
            data: {
                id: somethingToIdentifyTheElement,
                newName: r
            },
            success: function(response) {
                // Successfully renamed the element!
                // If your server-side script returned something interesting,
                // you can find it in the response argument
            }
        });
    }
}

Answer 3

如果有人可以让我知道我将如何提交然后运行服务器端脚本，那将不胜感激。

为此，您需要使用$.ajax()函数来调用服务器端函数。

$.ajax({
  url: 'YourController\yourAction',
  type:'post'
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});