Jquery Popup 表单提交答案

【问题标题】：Jquery Popup form submitJquery Popup 表单提交
【发布时间】：2013-10-18 04:16:34
【问题描述】：

我对 ajax 比较陌生，我正在使用 jquery mobile。我正在做的是一个弹出窗口内的登录表单，我必须编写代码才能使两者都工作，但我只是不确定如何将两者连接起来才能真正工作。

这是弹出的html

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Login</a>
        <div data-role="popup" id="popupLogin" data-overlay-theme="a" data-theme="a" class="ui-corner-all">
        <form id="popuplogin">
            <div style="padding:10px 20px;">
                <h3>Please Login</h3>
                <label for="un" class="ui-hidden-accessible">Username:</label>
                <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
                <label for="pw" class="ui-hidden-accessible">Password:</label>
                <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
                <button type="submit" data-theme="b" data-icon="check">Sign in</button>
            </div>
        </form>
        </div>

这是我的脚本。我的问题是如何将两者联系在一起。

$("#popupLogin").submit(function() {
$.ajax({
type: "POST",
url: "submiturl",
data: $("input#name").val(),
success: function(html) {
  // show the confirmation inside the popup
}
})
})

说实话，我什至不确定我是否完全理解 ajax，但如果有人可以帮助我理解它。将不胜感激。

【问题讨论】：

没有ID为form的表单，所以什么都不会触发。更不用说您有 3 个不同的标签，其 ID popuplogin 不是有效的 HTML5。 ID 必须是唯一的。
好吧，我理解了 ajax 开头的部分，我只是不完全理解这部分代码是如何工作的。我使用的代码也直接来自 jquery mobile website
不管你从哪里得到它，没有id为“form”的表单，所以不会调用ajax。也没有 ID 为“名称”的输入，因此没有任何价值。当你提交表单时，jQuery 会触发，因为它在表单提交时触发。触发时调用ajax函数。
好的，所以我将其更改为调用 popupLogin。你能解释一下ajax是如何工作的吗？比如我会去哪里使用我的 php 来处理数据？
Type:"POST" - 表示数据是通过post发送的，也就是说URL不会包含数据。 url - 数据将被发送到的 URL。如果 URL 是 www.mywebsite.com/derp.php，derp.php 将接收数据。数据 - 传递到 POST 以由您的服务器代码处理的数据。 Success - 从服务器代码接收“回调”的匿名函数。如果调用成功，服务器代码中的任何输出都会返回。

标签： jquery ajax jquery-mobile

【解决方案1】：

试试这样的。

<button type="button" data-theme="b" data-icon="check" data-inline="true" onclick="validLogin()">Sign in</button>

通过添加 onclick 您调用您的 javascript 函数。即连接两段代码

然后在你的javascript中做这样的事情。

function validLogin(){
var uname=$('#uname').val();
var password=$('#password').val();
$.ajax({
    type: "POST",
    url: "scripts/processed.php",
    data: {"uname": uname, "password":password},
    cache: false,
    success: function(result){
        var result=trim(result);
        if(result=='correct'){
            window.location='index.php';
            $('#loginForm').submit();
        }else{
            $("#loginerror").html(result);
            return false;
        }
    }
});
}

应该做你想做的。

【讨论】：

【解决方案2】：

看到这一行：

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Login</a>

和

<form id="popuplogin">

将<a href="#popupLogin" 更改为<a href="#popuplogin"

【讨论】：

False，他应该完全更改 ID，因为它们应该是 100% 唯一的。
弹出窗口加载得很好，改变它会做什么？

【解决方案3】：

您的弹出代码看起来正确。我会将您的表单代码更改为

<form id="formLogin" action="@submitUrl" method="post">

然后您的提交按钮将提交表单数据而无需您执行任何 javascript。

【讨论】：