stackoom
  简体   繁体   中英

Basic POST with JQuery Mobile from form using php

 原文  2015-01-06 04:43:49  0   3    javascript/ php/ jquery-mobile/ forms/ http-post

Question

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 answers

solution1
 1 ACCPTED  2015-01-06 05:35:49

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

solution2
 0  2015-01-06 04:56:18

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

solution3
 0  2015-01-06 05:01:58

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JQuery basic form post Passing serialized data from jquery mobile to PHP using $.post Detect successful html form submission using POST to cross-domain script from PhoneGap, mobile jQuery app Post form values using jquery and PHP SUBMIT form using post method without ajax (jquery mobile) jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined php can't get data from #.ajax post in Jquery mobile No response from PHP code using jQuery post() How to submit attr value and form values with POST using JQuery and PHP? Using AJAX/JQuery to post form data to a php script
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM