基本 POST with JQuery Mobile 来自使用 php 的表单

Question

首先，对于 post 提出另一个问题，我深表歉意，但我已经研究了大量与此主题相关的 SO 问题，但未能找出我的问题。我是 PHP 的新手，充其量只能使用 Jquery 手机等设备。

我正在尝试 post 到 .php 文件并获得响应。最终这将演变成一个数据库 posting yada yada。现在，我似乎无法从我的 post 那里得到回复。我正在运行 Xampp 来托管 php，Jquery Mobile 正在用于其他功能，因此它可以正常工作，

HTML:

<form>
        <p>Username: </p><input type="text" id="username" value="" />
        <p>Password: </p><input type="text" id="password" value="" />
        <input type="button" onclick="submitLogIn()" value="Log In" />
</form>

Javascript:

function submitLogIn() {

    alert("Submitting: " + $('#username').val() + $('#password').val());
    var dbURL = "http://localhost/testerpage.php";

    $.post(dbURL, {
        //These are the names of the form values
        Username: $('#username').val(),
        Password: $('#password').val()

    }, function (data,status) {
        alert(status); //Won't fire
        alert(html); //Won't fire
        var response = html;
        alert(response); //Won't fire
        if (response == "Success")
        {
            alert("Success!"); //Won't fire
            //testlog.innerHTML = "Success";
        }
        else
        {
            alert("Failure!");//Won't fire
            //testlog.innerHTML = "Failure";
        }

    });

    alert("Finished"); //Fires

};

PHP

<?php

    // VARS
    $Username=$_GET["Username"]; //Also tried _POST
    $Password=$_GET["Password"]; //Also tried _POST

    //VALIDATION
    if(
    $Username=="" ||
    $Password==""
    ) {
        echo "Error";
    } else {
        echo "Success";
    }
?>

我最好的猜测是 .php 有问题，因为我看过的所有问题似乎都证实了我的 JavaScript 是正确的。除了回调函数中的警报外，我所有的警报都会触发。用户名和密码也已正确设置，所以这不是问题所在。我尝试在我的 .php 中使用 _POST 和 _GET，我最初使用 _POST 是因为我正在 posting 数据，但我正在关注这个问题：(Phonegap contact form not working over PHP) 并且它做了相反的事情所以我改变了它。没有不同。我的 .php 实际上是托管的（我可以毫无错误地导航到它）。我也尝试使用 $.ajax 函数，但遇到了同样的问题。

提前致谢。

编辑： 为每个请求添加了更多 HTML（所有应该相关的内容），不能全部添加，因为它太长了。

    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="msapplication-tap-highlight" content="no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

            <!-- Stylesheets -->
            <link rel="stylesheet" href="css/snctfy2/snctfy2.css" />
            <link rel="stylesheet" href="css/snctfy2/jquery.mobile.icons.min.css" />

            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <link href="jquerymobile/jquery.mobile.structure-1.4.2.min.css" rel="stylesheet" type="text/css" /> <!-- Add .structure after theme-->

            <!-- Jquery core -->
            <script src="js/jquery.js" type="text/javascript"></script>

            <!-- Jquery mobile library file -->
            <script src="jquerymobile/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>

            <!-- DateBox -->
            <link rel="stylesheet" type="text/css" href="css/jqm-datebox.css" />
            <script type="text/javascript" src="js/datebox/jqm-datebox.core.js"></script>
            <script type="text/javascript" src="js/datebox/jqm-datebox.mode.calbox.js"></script>
            <script type="text/javascript" src="js/datebox/jqm-datebox.mode.datebox.js"></script>
            <script type="text/javascript" src="js/datebox/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>


            <!-- Scripts (pre-load)-->
            <script src="js/scripts.js" type="text/javascript"></script>

            <!-- CSS Override -->
            <link rel="stylesheet" type="text/css" href="css/override.css" />

            <title>SNCTFY</title>
        </head>
        <body>

    <!--there is some more <div> tags here unrelated-->
        <!--------------------------------------------------------Login Page---------------------

-------------------------------------------->
            <div data-role="page" id="login" data-theme="a" class="bPage">
                <div data-role="content">
                    <form>
                        <p>Username: </p><input type="text" id="username" value="" />
                        <p>Password: </p><input type="text" id="password" value="" />
                        <input type="button" onclick="submitLogIn()" value="Log In" />
                    </form>
                    <a href="#register" data-role="button">Register</a>
                    <button onclick="showAlert()">Test</button>
                    <p id="testlog">Results</p>
                </div>
            </div>

    <!-- more <div> pages -->

            <!-- Scripts (post-load)-->
            <script type="text/javascript" src="phonegap.js"></script>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
    </html>

EDIT2: 将 JavaScript 更改为测试

的答案之一

function submitLogIn() {
    alert("Submitting: " + $('#username').val() + $('#password').val());
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        type: "POST",
        url: "http://localhost/testerpage.php", 
        data: { "Username": username, "Password": password },
        success: function (data) {
            if (data) {

                alert(data);
            }
            else {
                alert('Successfully not posted.');
            }
        }
    });

};

Answer 1

试试这个：

function submitLogIn() {

    alert("Submitting: " + $('#username').val() + $('#password').val());
    var dbURL = "http://localhost/testerpage.php";

    //These are the names of the form values
    var username = $('#username').val();
    var password = $('#password').val();

    $.ajax({
         url: dbURL,
         type:'post',
         data:'&username='+username+'&pass='+password,
         success:function(response){
              alert(response);
         }
     });

};




<?php

    // VARS
    $Username=$_POST["username"]; //Also tried _POST
    $Password=$_POST["pass"]; //Also tried _POST

    //VALIDATION
    if(
    $Username=="" ||
    $Password==""
    ) {
        echo "Error";
    } else {
        echo "Success";
    }
?>

Answer 2

试试这个代码脚本

<script>
function submitLogIn() {
  alert("Submitting: " + $('#username').val() + $('#password').val());
  var dbURL = "http://localhost/testerpage.php";

  $.post(dbURL, {
    //These are the names of the form values
    Username: $('#username').val(),
    Password: $('#password').val()

}, function (data,status) {
    if (data == "Success")
    {
        alert("Success!"); //Won't fire
        //testlog.innerHTML = "Success";
    }
    else
    {
        alert("Failure!");//Won't fire
        //testlog.innerHTML = "Failure";
    }

});   
alert("Finished"); //Fires
};
</script>

PHP

// VARS
$Username=$_POST["Username"]; //Also tried _POST
$Password=$_POST["Password"]; //Also tried _POST

//VALIDATION
if(
$Username=="" ||
$Password==""
) {
    echo "Error";
} else {
    echo "Success";
}

Answer 3

试一试jqueryAjax

<body>
<form>
    <p>Username: </p><input type="text" id="username" value="" />
    <p>Password: </p><input type="text" id="password" value="" />
    <input type="button" onclick="submitLogIn()" value="Log In" />
</form>
<script>
function submitLogIn() {
alert("Submitting: " + $('#username').val() + $('#password').val());
var username =$('#username').val();
var password =  $('#password').val();
$.ajax({
    type: "POST",
    url: "http://localhost/testerpage.php",
    data:{"Username":username,"Password":password},
    success: function(data) {
    if (data) {

       alert(data);
    }
    else {
        alert('Successfully not posted.');
    }
    }
    });

    }

</script>
</body>
</html>

在PHP

<?php
$Username=$_POST["Username"]; //Also tried _POST
$Password=$_POST["Password"]; //Also tried _POST

//VALIDATION
if(
$Username=="" ||
$Password==""
) {
    echo "Error";
} else {
    echo "Success";
}
?>

基本 POST with JQuery Mobile 来自使用 php 的表单

Basic POST with JQuery Mobile from form using php

javascript

php

jquery-mobile

forms

http-post