dongyan3237
2015-01-06 04:43
浏览 91

使用php从表单中使用JQuery Mobile进行基本POST

Firstly I apologize for posting another one of these questions, but I've dove through a ton of SO questions related to this topic and haven't be able to figure out my problem. I'm new to PHP and an amature at best using Jquery mobile and the like.

I'm attempting to post to a .php file and get a response back. Eventually this will evolve into a database posting yada yada. For now, I can't seem to get my response back from my post. I'm running Xampp to host the php, Jquery Mobile is being used in other functions so it does work properly,

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";
    }
?>

My best guess is that something is wrong with the .php because all of the questions I've looked at seem to confirm my JavaScript is right. All of my alerts fire except the ones in the call back function. The username and password are also correctly being set so that isn't the problem. I tried using _POST and _GET in my .php, I originally was using _POST because I was posting data but I was following this question: (Phonegap contact form not working over PHP) and it did the opposite so I changed it. No difference. My .php is actually hosted for sure (I can navigate to it without an error). I also tried using the $.ajax function but had the same issues.

Thanks in advance.

EDIT: Added more of the HTML (all that should be relevant) per request, can't add it all as it is too long.

    <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: Changed JavaScript to one of the answers to test

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.');
            }
        }
    });

};
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douan8473 2015-01-06 05:35
    已采纳

    Just try jquery Ajax

    <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>
    

    in PHP

    <?php
    $Username=$_POST["Username"]; //Also tried _POST
    $Password=$_POST["Password"]; //Also tried _POST
    
    //VALIDATION
    if(
    $Username=="" ||
    $Password==""
    ) {
        echo "Error";
    } else {
        echo "Success";
    }
    ?>
    
    点赞 打赏 评论
  • dongyidao1461 2015-01-06 04:56

    Try this:

    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";
        }
    ?>
    
    点赞 打赏 评论
  • dongwei1234 2015-01-06 05:01

    try this code script

    <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";
    }
    
    点赞 打赏 评论

相关推荐 更多相似问题