【问题标题】:send JSON Object via POST or AJAX JQuery to PHP通过 POST 或 AJAX JQuery 将 JSON 对象发送到 PHP
【发布时间】:2015-06-14 17:56:57
【问题描述】:

我为我的问题检查了很多答案,但没有一个对我有用。 我用在script 中找到的script 创建了一个json 对象,并且工作正常,但是当我尝试将它发送到php 时(我使用laravel 框架 ) 与$.post,对象var_dumpreturns NULL

Chrome Debug 的网络标签中,POST request 运行良好,但php 无法获取任何数据。 我已经在这个项目中使用了POST Ajax,除此之外没有任何问题。

如何将我的对象正确发送到 PHP?

有一个 JQuery 脚本可以获取表单值并将它们转换为 JSON 对象:

jQuery.fn.serializeObject = function() {
    var arrayData, objectData;
    arrayData = this.serializeArray();
    objectData = {};

    $.each(arrayData, function() {
        var value;

        if (this.value !== '') {
            value = this.value;

            if (objectData[this.name] != null) {
                if (!objectData[this.name].push) {
                    objectData[this.name] = [objectData[this.name]];
                }

                objectData[this.name].push(value);
            } else {
                objectData[this.name] = value;
            }
        }
    });

    return objectData;
};

编辑 2:这是我用来解决问题的两种方法:

$('#details_form').on('submit',function(e){

e.preventDefault();
var json_enc = JSON.stringify($('#details_form').serializeObject());

$.post(
        $("#details_form").prop('action'), 
        { 'json_enc' : json_enc }, 
        function(data) 
        { alert(data.msg) }, 'json'); });

第二个没有 JSON 的方法:

$('#save').on('click',function(e) {

var form = $(this).closest('form') ;
e.preventDefault();

var result = form.serialize();

var ajax = $.post(
    form.data('action'),        {
        'data': result
    },
    function(data) {
        alert(data);
    }
);

ajax.fail(function(data){
    alert('fail (see console for details)') ;
    console.log(data) ;
}) ;

})

第一个函数返回这个 JSON 对象:

{
    "_token": "HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3",
    "id": "contact_1",
    "name": "John",
    "surname": "Wayne",
    "address": "2nd street",
    "contact": ["656346843", "56196856"]
}

第二个函数返回:

_token=HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3&id=contact_1&name=Gino&surname=Megna&address=kjwebgflk+645&contact=656346843&contact=6548198189&contact=

使用两个 JQuery 函数,在 PHP 中返回(使用 var_dump($_POST)):

array(6) { ["_token"]=> string(40) "HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3" ["id"]=> string(9) "contact_1" ["name"]=> string(4) "Gino" ["surname"]=> string(5) "Megna" ["address"]=> string(13) "kjwebgflk 645" ["contact"]=> string(0) "" }

这是我的表格:

<form method="POST" action="http://localhost/rubrica/public/contact_process" accept-charset="UTF-8" class="form-bootstrap" id="details_form" autocomplete="off">
<input name="_token" type="hidden" value="HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3">
<input id="contact_id" name="id" type="hidden" value="contact_1">
<div class="bg_contact">
    <div class="image_contact">
        <label for="immagine" id="" class="">Add Image</label>
        <input name="image" type="file" id="immagine"> </div>
    <div class="rif_contact">
        <div class="name_contact">
            <input placeholder="Name" id="name" name="name" type="text" value="John"> </div>
        <div class="surname_contact">
            <input placeholder="Surname" id="surname" name="surname" type="text" value="Wayne"> </div>
    </div>
</div>
<div class="address">
    <div class="label_address">
        <label for="address">Address</label>
    </div>
    <input placeholder="Address" id="address" name="address" type="text" value="2nd street"> </div>
<div class="bg_details">
    <label for="contacts">Contacts</label>
    <div class="content_detail">
        <input type="text" name="contact" class="contact_details" placeholder="Telephone" value="656346843" id="detail_161">
        <button onclick="delete_detail_exist(this,161)" id="remScnt" type="button">Remove</button>
    </div>
    <div class="content_detail">
        <input type="text" name="contact" class="contact_details" placeholder="Telephone" value="56196856" id="detail_160">
        <button onclick="delete_detail_exist(this,160)" id="remScnt" type="button">Rimuovi</button>
    </div>
    <div class="content_detail">
        <input placeholder="Telephone" class="contact_details" id="p_scnt" name="contact" type="text">
        <button id="addScnt" onclick="add_detail_field(this)" type="button">Add</button>
    </div>
</div>
<input id="save" type="submit" value="Save"> </form>

PHP 方法:

public function contact_process() {
    $result = trim (Input::get('result'));
    $json = json_decode($result);
    var_dump($json);
}

【问题讨论】:

  • 看起来“Input::get('result')”返回的是GET数据,而不是POST
  • 你试过 print_r($_POST);
  • @alex_kalenyuk Input::get('result') 是正确的,因为 Laravel 使用 Input::get() -> (laravel.com/docs/4.2/requests) 管理 POST 和/或 GET 请求
  • 您没有阻止默认提交表单
  • 提交表单时页面是否刷新?

标签: php jquery ajax json laravel-4


【解决方案1】:

又一个问题诞生了。

我的 JQuery 函数可以获取所有表单字段的值并将它们推送到数组中:

$(document).ready(function() {
        $('#details_form').submit(function(e){
    e.getPreventDefault();
    var result = $(this).serializeObject();
    $.post($(this).prop('action'),{
                'data': result
            },
            function(data){
                alert(data.msg);
            },
        'json'
    );
    return false;
});

});

效果非常好(发送所有数据):

{"_token":"w35HLqCZi61ki9QOlu6MFwWxYNbBoiEJkcQ58G2b","id":"contact_1","name":"t","surname":"fg","address":"iiiiiiiiiiiiiiiiiiiii","contact[]":["16151515","2325556"]}

但加载我针对$(this).prop('action') 的页面,而不是通过警报立即发送回json 响应。

但是,如果我删除 e.getPreventDefault();,JQuery 脚本会返回错误 500,并带有以下响应:{"error":{"type":"ErrorException","message":"array_filter() expects parameter 1 to be array, null given","file":"C:\\xampp\\htdocs\\rubrica\\app\\controllers\\ContactController.php","line":145}} 就像 PHP 什么都得不到......

这是我的 PHP 函数:

 public function contact_process() {
        $contact_id = trim(Input::get('id'));
        $contact_name = trim(Input::get('name'));
        $contact_surname = trim(Input::get('surname'));
        $contact_address = trim(Input::get('address'));
        $telephones = array_filter(Input::get('contact'));
if ($contact_id !== '' &&  $contact_name !== '' && $contact_surname !== '' && $contact_address !== '' && $telephones !== '') {

        if ($contact_id == 'new') {

            $new_contact = new Contact;
            $new_contact->name = $contact_name;
            $new_contact->surname = $contact_surname;
            $new_contact->address = $contact_address;
            $new_contact->save();
            $LastInsertId = $new_contact->id;

            foreach ($telephones as $value) {
                $new_detail = new Detail;
                $new_detail->telephone = $value;
                $new_detail->contact_id = $LastInsertId;
                $new_detail->save();
            }

            $response = array(
                'status' => 'success',
                'msg' => 'Nuovo contatto aggiunto'
            );

            return Response::json($response);

        } else {

            list($tmp, $id_temp) = explode("_", $contact_id);

            $get_contact = Contact::find($id_temp)->first();

            if ($get_contact) {

                $get_contact->name = $contact_name;
                $get_contact->surname = $contact_surname;
                $get_contact->address = $contact_address;
                $get_contact->save();

                $delete_details = Detail::where('contact_id', '=', $id_temp)->delete();

                foreach ($telephones as $value) {
                    $new_detail = new Detail;
                    $new_detail->telephone = $value;
                    $new_detail->contact_id = $id_temp;
                    $new_detail->save();
                }

                $response = array(
                        'status' => 'success',
                        'msg' => 'Contatto aggiornato'
                );

                return Response::json($response);

            }
        }
}
        $response = array(
                'status' => 'error',
                'msg' => 'Compila tutti i campi ed inserisci almeno un numero di telefono'
        );

        return Response::json($response);

    }

【讨论】:

    【解决方案2】:

    代码 $(this).serializeObject() 应该序列化 this 的内容......在你的例子中 this 是一个按钮。

    试试

    var json_enc = JSON.stringify($('#details_form').serializeObject());
    

    所以也要编辑 JS

    $.post(
                 $("#details_form").prop('action'), 
                 { 'result': json_enc }, 
                 function(data) 
                 { alert(data.msg) }, 'json');
    

    【讨论】:

      【解决方案3】:

      假设您只想将表单发送到 php 页面(用于保存或 wathever)而不重新加载当前页面,我不知道您为什么需要 json。

      我可以在下面给你一个简单的例子,它可以做到,但也许我不太明白你想要做什么。

      JS部分:

      jQuery(document).on('click','#save',function(e) {
      
                      var form = jQuery(this).closest('form') ;
                      e.preventDefault() ;
      
                      var ajax = $.post(
                          form.data('action'),
                          form.serialize(),
                          function(data) { alert(data) ; }
                      );
      
                      ajax.fail(function(data){
                          alert('fail (see console for details)') ;
                          console.log(data) ;
                      }) ;
                  }) ;
      

      HTML 部分(改动不多)

      <form method="POST" action="#" data-action="./contact_process.php" accept-charset="UTF-8" class="form-bootstrap" id="details_form" autocomplete="off">
                  <input name="_token" type="hidden" value="HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3">
                  <input id="contact_id" name="id" type="hidden" value="contact_1">
                  <div class="bg_contact">
                      <div class="rif_contact">
                          <div class="name_contact">
                              <input placeholder="Name" id="name" name="name" type="text" value="John"> </div>
                          <div class="surname_contact">
                              <input placeholder="Surname" id="surname" name="surname" type="text" value="Wayne"> </div>
                      </div>
                  </div>
                  <div class="address">
                      <div class="label_address">
                          <label for="address">Address</label>
                      </div>
                      <input placeholder="Address" id="address" name="address" type="text" value="2nd street"> </div>
                  <div class="bg_details">
                      <label for="contacts">Contacts</label>
                      <div class="content_detail">
                          <input type="text" name="contact" class="contact_details" placeholder="Telephone" value="656346843" id="detail_161">
                          <button onclick="delete_detail_exist(this,161)" id="remScnt" type="button">Remove</button>
                      </div>
                      <div class="content_detail">
                          <input type="text" name="contact" class="contact_details" placeholder="Telephone" value="56196856" id="detail_160">
                          <button onclick="delete_detail_exist(this,160)" id="remScnt" type="button">Rimuovi</button>
                      </div>
                      <div class="content_detail">
                          <input placeholder="Telephone" class="contact_details" id="p_scnt" name="contact" type="text">
                          <button id="addScnt" onclick="add_detail_field(this)" type="button">Add</button>
                      </div>
                  </div>
                  <input id="save" type="button" value="Save">
              </form>
      

      还有你的 php contact_process.php 部分:

      <?php
      
          var_dump($_POST) ;
      

      【讨论】:

      • 我正在尝试你的方法,几分钟后我会告诉你它是否有效 :) 谢谢你的支持 :)
      • 您的方法不错,但没有获取联系人值:array(6) { ["_token"]=&gt; string(40) "HeC6RwznFYuemIvP68pHYuET634fgQoZQCtL7ed3" ["id"]=&gt; string(9) "contact_1" ["name"]=&gt; string(4) "John" ["surname"]=&gt; string(5) "Wayne" ["address"]=&gt; string(13) "2nd street" ["contact"]=&gt; string(0) "" }
      • 此外,联系人必须具有不同的名称数组(我制作了一个数组,仅更改联系人字段的名称以使其唯一,并且我制作了一个过滤空白字段的条件
      • 哦,你可以设置 name="contact[]" 而不是 name="contact",这样所有的联系人字段都会被传递。我还没有阅读 html 部分,所以没有看到它。您还可以设置 name="contact[telephone]"、contact[telephone][]... 或其他任何内容,这只是基本的数组语法。我在下面编辑了代码。
      • 在这里查看我的新帖子
      猜你喜欢
      • 2014-09-03
      • 2021-12-31
      • 1970-01-01
      • 2013-02-05
      • 2016-12-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多