使用jquery ajax json和serialize()简单地插入数据库?

时间:2016-03-18 07:27:31

标签: jquery json ajax

我有问题,我想使用jquery ajax来输入数据库。

这是我的代码 tes.php

<script src='jquery.js'></script>
<script>
  $(document).ready(function(){
     //alert('$'); 

      $('.SAVE').click(function(){
        //alert('&');

        var name = $('.NAME').val();
        var alamat = $('.ALAMAT').val();

        //alert(name);
        //alert(alamat);

           $.ajax({

              type:"POST",
              dataType:"json",
              url:"tes2.php",
              data:$('#COBA').serialize(),
              success: function(response) {

                   alert(response);


               },


           });      

      });


  });


</script>

<form id='COBA'>
  <input type='text' name='NAME' class='NAME' value='septiyo'><br>
  <input type='text' name='ALAMAT' class='ALAMAT' value='semambung'><br>
  <input type='submit' value='SAVE' name='SAVE' class='SAVE'>
</form>

tes2.php

<?php

$name = $_POST['NAME'];
$alamat = $_POST['ALAMAT'];

print_r($_POST);



?>

但它不起作用,我希望可以获取tes2.php上的数据,以便我可以处理它 查询。

任何人都可以帮我解决这个问题吗?

先谢谢

3 个答案:

答案 0 :(得分:1)

它确实有效,但你看不到它,因为当你点击按钮时它会刷新页面,你需要阻止提交按钮的默认行为:

 $(document).ready(function(){
  $('.SAVE').click(function(e){
    e.preventDefault(); // ---- this
    var name = $('.NAME').val();
    var alamat = $('.ALAMAT').val();

       $.ajax({
          type:"POST",
          dataType:"json", // remove this if you did't want any response
          url:"tes2.php",
          data:$('#COBA').serialize(),
          success: function(response) {
               alert(response);
           },
       });      
  });
 });

或者在保存按钮上提供type='button'。如果您不想要任何回复,请删除dataType:"json"

答案 1 :(得分:1)

只需在表单中添加method="post"即可。将更改输入从"submit"添加到"button"

Demo

答案 2 :(得分:0)

写入数据:{NAME:name,ALAMAT:alamat}

这会将您的数据传递给tes2.php。