在Phonegap项目中组合Ajax，Jquery，mysql，php无效

Question

I tried to send data to my database using the following code but it just doesn't work. Code is written after this example ( http://samcroft.co.uk/2012/posting-data-from-a-phonegap-app-to-a-server-using-jquery/ )

If anybody has an idea what's wrong... I appreciate any help.

HTML form

<form>
    <fieldset data-role="controlgroup">
        <legend>Pick your team:</legend>
        <input type="radio" name="team_name" id="red" value="on" checked="checked">
        <label for="red">Team Red</label>
        <input type="radio" name="team_name" id="blue" value="off">
        <label for="blue">Team Blue</label>       
    </fieldset>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Choose your number:</legend>
        <input type="radio" name="player_number" id="1" value="on" checked="checked">
        <label for="1">1</label>
        <input type="radio" name="player_number" id="2" value="off">
        <label for="2">2</label>
        <input type="radio" name="player_number" id="3" value="off">
        <label for="3">3</label>
        <input type="radio" name="player_number" id="4" value="off">
        <label for="4">4</label>
        <input type="radio" name="player_number" id="5" value="off">
        <label for="5">5</label>
        <input type="radio" name="player_number" id="6" value="off">
        <label for="6">6</label>
        <input type="radio" name="player_number" id="7" value="off">
        <label for="7">7</label>
        <input type="radio" name="player_number" id="8" value="off">
        <label for="8">8</label>
        <input type="radio" name="player_number" id="9" value="off">
        <label for="9">9</label>
        <input type="radio" name="player_number" id="10" value="off">
        <label for="10">10</label>
    </fieldset>
    <label for="player_name">Your name:</label>
    <input type="text" name="player_name" id="player_name" value="">         
    <input type="submit" value="Submit">
</form>

Jquery / Ajax code

$('form').submit(function(){
    var postData = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: postData,
        url: 'http://www.kauwenberg.com/Commander/core/handleplayer_2.php', // 2 !!
        succes: function(data){
            console.log(data);
            alert(data);
            },
        error: function(){
            console.log(data);
            alert(data);
            }
    });

    return false;
});

PHP code on http://www.kauwenberg.com/Commander/core/handleplayer_2.php

<?php
$server = "localhost";
$username = "MA_SECRET";
$password = "MA_SECRET";
$database = "MA_SECRET";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());

mysql_select_db($database, $con);

$team_name = mysql_real_escape_string($_POST["team_name"]);
$player_number = mysql_real_escape_string($_POST["player_number"]);
$player_name = mysql_real_escape_string($_POST["player_name"]);

$sql = "INSERT INTO players (team_name, player_number, player_name) ";
$sql .= "VALUES ($team_name, $player_number, $player_name)";

if (!mysql_query($sql, $con)) {
  die('Error: ' . mysql_error());
} else {
  echo "Comment added";
}

mysql_close($con);
?>

Answer 1

$(document).on('submit','form',function(e){
    e.preventDefault();
    var postData = $(this).serialize();
    $.post('http://www.kauwenberg.com/Commander/core/handleplayer_2.php',postData,
    function(data){ 
        alert(data);
    });    
    return false;
});

try this

Answer 2

you may check the last question on this page

http://phonegap.com/about/faq/

and i would recommend using JSON instead.

check this link http://catchmayuri.blogspot.com/2012/01/working-with-json-phonegap-application.html

Answer 3

Beware: you aren't quoting your $team_name, $player_number and $player_name in your SQL code which can be very dangerous . The fact that you use mysql_real_escape_string doesn't matter if your values in your query aren't properly quoted out; they will still get parsed as normal SQL.

$sql .= "VALUES ('$team_name', '$player_number', '$player_name')";

It might not be the reason why it is currently not working, but it will definitely get back to you when you start working on other things.

Also, check if your AJAX requests reach the server. Your requests might get blocked by the phone's security policy if they cross multiple domains.

Answer 4

Hi change your submit button to <input type="button" value="Submit" id="submit_button" /> and then change your jQuery event to the following:

$('#submit_button').bind('click',function(e){

    e.preventDefault();
    var postData = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: postData,
        url: 'http://www.kauwenberg.com/Commander/core/handleplayer_2.php', // 2 !!
        success: function(data){
            console.log(data);
            alert(data);
        },
        error: function(){
            console.log(data);
            alert(data);
        }
    });
    return false; 
});

It will alert the response back from the server will be displayed in alert dialog.

Answer 5

You've a spelling mistake as well:

succes : function(data){

"success" is the word.