Отправка формы с помощью jquery и AJAX

Question

Как указано в названии темы, я пытаюсь передать переменные из HTML-формы в PHP-скрипт с помощью jQuery и AJAX. Я делал это раньше, но сегодня у меня нет доступа к файлам. PHP не будет печатать имя и фамилию. Я нашел несколько примеров, но все, что я делаю, это одно и то же ... Что я делаю неправильно за последние несколько дней?

Это HTML код:

First Name: <br /> 
<input type="text" name="fname" /><br /> 
Last name: <br /> 
<input type="text" name="lname" /><br /><br /> 
<input type="submit" name="submit" value="Send" /> 

Javascript (Jquery):

$(document).ready(function(){ 
    $('input[name="submit"]').click(function(){ 
     var fname = $('input[name="fname"]').val(); 
     var lname = $('input[name="lname"]').val(); 

     $.ajax({ 
      type: 'POST', 
      url: 'index.php', 
      data: {fname:fname, lname:lname}, 
      dataType:"json" 
     }); 

    }); 
}); 

PHP:

if(isset($_POST['fname']) && isset($_POST['lname'])){ 
    $fname = $_POST['fname']; 
    $lname = $_POST['lname']; 
    echo $fname; 
    echo "<br />"; 
    echo $lname;  
} 

Answer 1

Либо изменить РНР

if(isset($_POST['fname']) && isset($_POST['lname'])){ 
    $fname = $_POST['fname']; 
    $lname = $_POST['lname']; 
    $string = $fname."<br />".$lname; 
    echo $string;  
} 

И ваш Jquery к

$(document).ready(function(){ 
    $('input[name="submit"]').click(function(){ 
     var fname = $('input[name="fname"]').val(); 
     var lname = $('input[name="lname"]').val(); 

     $.ajax({ 
      type: 'POST', 
      url: 'index.php', 
      data: {fname:fname, lname:lname}, 
      success: function(response){ 
       console.log(response); 
       // YOUR OWN LOGIC 
       // IE: $('#my_div').append(response); 
      } 

     }); 

    }); 
}); 

Или изменить PHP для

if(isset($_POST['fname']) && isset($_POST['lname'])){ 
    $response = array(); 
    $response['fname'] = $_POST['fname']; 
    $response['lname'] = $_POST['lname']; 
    echo json_encode($response); 
} 

И ваш Jquery к

$(document).ready(function(){ 
    $('input[name="submit"]').click(function(){ 
     var fname = $('input[name="fname"]').val(); 
     var lname = $('input[name="lname"]').val(); 

    $.ajax({ 
     type: 'POST', 
     url: 'index.php', 
     data: {fname:fname, lname:lname}, 
     dataType:"json" 
     success: function(response){ 
      response = eval(response); 
      console.log('First name:' + response.fname); 
      console.log('Last name:' + response.lname); 
       // YOUR OWN LOGIC 
       // IE: $('#my_div').append('Last name: ' + response.lname); 
     } 

    }); 

    }); 
}); 

Я не проверял ничего, но он должен поместить вас на правильный путь. Вы также можете использовать beforeSend и error/fail обратные вызовы для отладки и не забудьте проверить ответ (Firebug отлично подходит для этого), это очень помогает.

Answer 2

Попытка реализовать функцию "успеха" в запросе Ajax ,

$.ajax({ 
      type: 'POST', 
      url: 'index.php', 
      data: {fname:fname, lname:lname}, 
      dataType:"json", 
      beforeSend: function() { 

      }, 
      complete: function() { 

      }, 
      error: function(xhr, ajaxOptions, thrownError) { 

      }, 
      success: function(result) { 
       //-- success! 
       alert('it works!'); 
      } 
     })