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

时间:2014-07-17 22:50:53

标签: php jquery ajax json ajaxform

我似乎无法通过ajax / json从我的表单发布到我的php文件。当我单击提交按钮时没有任何反应(除了客户端jquery错误检查字段。)我尝试了多种尝试使其工作。

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

非常感谢任何帮助。我只是无法帮助,但认为问题在这里:

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

   });

但是我对ajax来说太新了,json真的知道。非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这一行:post_data = {'addNameForm'+pName};

必须是post_data = {'addNameForm:'+pName};

所以它可以发布&#34; addNameForm&#34;使用pName变量的值,这是&#34; name&#34;中的输入文本。字段。

但如果我是你,我会发布如下数据:

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