使用$ .ajax将表单数据发送到php页面

时间:2015-04-11 18:26:24

标签: javascript php jquery ajax

我有一个这样的表格,

<form id="frm" method="post">
    <input type="text" name="inp_txt" id="inp_txt"/>
    <input type="submit" name="sbtn" value="send" id="sbtn">
</form>

这是我的javascript代码

 $(function(){

  var request ;

   $('form#frm').submit(function(e){

   e.preventDefault();

   if(request){
       request.abort();
   }

   var $form = $(this);
   var $inputs = $form.find('inputs');
   var serailize = $form.serialize();

   console.log(serailize);

   $inputs.prop('disabled',true);

   request = $.ajax({
      url:'form.php',
      type:'post',
       data:serailize
   });

   request.done(function(response, textStatus, jqXHR){
       console.log('oky');

       $.ajax({
           url: "form.php",
           type: "get",
           success: function(data){
               console.log(data);
           },
           error:function(){
              console.log('bad');
           }
       });
   });

   request.fail(function(jqXHR, textStatus, errorThrown){
       console.error(
           "The following error occurred: "+
               textStatus, errorThrown
       );
   });

   request.always(function(){
       $inputs.prop("disabled", false);
   })
 })
})

form.php

中的php代码
<?php
  $name  = $_POST['inp_txt'];

  echo(json_encode(array(data=>$name)));
?>

但我有很大的问题, 在我的javascript代码的这一部分:

$.ajax({
           url: "form.php",
           type: "get",
           success: function(data){
               console.log(data);
           },
           error:function(){
              console.log('bad');
           }

我从post.php

中的console.log(data)收到了消息
Undefined index:inp_txt in htdocs\phpajax\form.php

请帮我解决这个问题, 感谢

1 个答案:

答案 0 :(得分:0)

在ajax的设置对象中将数据类型设置为json

$.ajax({
       dataType :'json',
       url: "form.php",
       type: "get",
       success: function(data){
           console.log(data);
       },
       error:function(e){
          console.log(e);
       }
   });
});