.post_data Jquery / JSON / PHP表单请求遇到问题

Question

I seem to be having trouble with my data posting from my form to my php file via ajax/json. When I click the submit button nothing happens (other than the client side jquery error checking on the field.) I have tried multiple variations of attempting to get this to work.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Here is my main form page:

<script>

$(document).ready(function() 
{
// do stuff here when the form is ready
$("#addName_Submit").click(function() 
{ 
    // when the add button is clicked get input field values
    var pName       = $('input[name=pName]').val();
    //validation at client's end
    var proceed = true;
    if(pName==""){ 
        $('input[name=pName]').css('border-color','#f47c20');
        $("input#pName").focus();
        proceed = false;}
if (proceed)
    {
    //data to be sent to server
    post_data = {'addNameForm'+pName};

        //Ajax post data to server
        $.post('addName.php', post_data, function(response)
        {  

            //load json data from server and output message     
            if(response.type == 'error')
            {
                output = '<div class="error">'+response.text+'</div>';
            }else{                
                output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $('#addNameForm input').val(''); 
            }
            $("#result").hide().html(output).slideDown();}, 'json');
        }

   });
    $("#result").slideUp();

});

});
</script>
echo "<div id='result'></div>";
?>
          <fieldset id="addRentalPropertyForm">
          <div class="newFormBack" id="newFormBack">
          <center><table style="paddin-left:50px;width:90%;">
<tr>
<td colspan="2"><?php echo "<h5 style='text-decoration:underline;'>Add Rental</h5>";?>     </td>
</tr>
<tr><td>Property Nickname</td></tr>
<tr><td><input style="width:160px; border-radius:3px;font-size:12px; line-height:12px;     border:#CCC 2px solid;" name="pName" id="pName" type="text"></td></tr>
<tr><td></td><td><center><button class="button orange" id="addRental_Submit"     name="addRentalSubmit" />Add Rental Data & Continue to Upload Images</button></center></td>    </tr></table>
</div>
</center>
</fieldset>

Here is the code from my addName.php page

<?php
if($_POST)
{

$to_Email       = "xxxxxx@gmail.com"; //Replace with recipient email address
$subject        = 'Testing Rental Addition'; //Subject line for emails


//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    //exit script outputting json data
    $output = json_encode(
    array(
        'type'=>'error', 
        'text' => 'Request must come from Ajax'
    ));

    die($output);
} 

//check $_POST vars are set, exit if any missing
if(!isset($_POST["pName"]))
{
  $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
   die($output);
}

//Sanitize input data using PHP filter_var().
// WE SHOULD SANAZTIZE OUR DATA FROM THE ADD RENTAL REQUEST

    $pName       = filter_var($_POST["pName"], FILTER_SANITIZE_STRING); 
*/
//$headers = 'From: your-name@YOUR-DOMAIN.COM' . "\r\n" .
$headers = 'From: '.$user_Email.'' . "\r\n" . //remove this line if line above this is un-commented
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

$user_Message = "The following name was added:\r\n\r\n";
$user_message .="Property Name: ".$pName."\r\n";
echo $user_message."<br />";

 // send mail
$sentMail = @mail($to_Email, $subject, $user_Message .'  -'.$user_Name, $headers);

if(!$sentMail)
{
    $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
    die($output);
}else{
    $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email'));
    die($output);
}
}
else
{
echo "No Post Data";    
}
?>

Any help is greatly appreciated. I just cant help but think the problem is here:

if (proceed)
    {
    //data to be sent to server
    post_data = {'addNameForm'+pName};

        //Ajax post data to server
        $.post('addName.php', post_data, function(response)
        {  

            //load json data from server and output message     
            if(response.type == 'error')
            {
                output = '<div class="error">'+response.text+'</div>';
            }else{                
                output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $('#addNameForm input').val(''); 
            }
            $("#result").hide().html(output).slideDown();}, 'json');
        }

   });

But im too new to ajax,json to really know. Thank you so much for any help.

Answer 1

this line: post_data = {'addNameForm'+pName};

must be post_data = {'addNameForm:'+pName};

so it can post "addNameForm" with the value of pName variable which is the inputted text in the "name" field.

but if I were you I would just post the data as following:

$.post('addName.php',{addNameForm:pName} , function(response){...});