数据未插入移动设备，但可在桌面设备上使用 - Codeigniter 和 Ajax

Question

我试图将数据解析到我的 controller 以便我可以使用 JQuery 将其插入数据库，它返回 null。 这是一个评论星系统，所以不使用传统的表单字段，但是检查元素中的网络选项卡显示数据实际上只是发布到 controller，由于某些奇怪的原因无法读取。

更新：数据在桌面上插入正常但是确认（flashdata）消息显示正确，不知道为什么。 此外，在移动视图上不显示任何数据或消息。 有谁知道为什么？ 我已经更新了下面的代码..

这是我认为的代码：

    <?php  if($this->session->flashdata('review_submitted')){  ?>
    <div class="alert alert-success alert-dismissible container show" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <strong>Thank you!</strong> Your review has been submitted.
    </div>
    <?php } ?>

<form id="myForm" name="myForm">

<br>
            <div class="form-group text-left div-style">
             <h3 style="font-family: MontserratLight;letter-spacing: 2px; line-height: 32px;">Full Name <b>*</b></h3>
                <input name="name" class="form-control" style="background: #f7f7f7;  border: 1px solid #801424;" required />
            </div>

    <div class="rate">
        <div id="1" class="btn-1 rate-btn"></div>
    <div id="2" class="btn-2 rate-btn"></div>
    <div id="3" class="btn-3 rate-btn"></div>
    <div id="4" class="btn-4 rate-btn"></div>
    <div id="5" class="btn-5 rate-btn"></div>
</div>

  <script>
   $(function(){
 $('.rate-btn').hover(function(){
 $('.rate-btn').removeClass('rate-btn-hover');
    var therate = $(this).attr('id');
    for (var i = therate; i >= 0; i--) {
 $('.btn-'+i).addClass('rate-btn-hover');
     };
   });

 $('.rate-btn').click(function(){
    var therate = $(this).attr('id');
    var dataRate = 'rate='+therate; //
 $('.rate-btn').removeClass('rate-btn-active');
    for (var i = therate; i >= 0; i--) {
 $('.btn-'+i).addClass('rate-btn-active');
    };
$('#myForm').on('submit', function(e){
  var url = "<?php echo base_url(); ?>index.php/reviews/add_review";
//  $('#myForm').append(therate);
  var dataPost = $('#myForm').serialize() + "&rate=" + therate;
 $.ajax({
    type : "POST",
    url : url,
    data: dataPost,
    success:function(){

   }
  });
});
});
 });
  </script>

并使用 controller 我只需使用以下内容获取数据并将其添加到数据库中：

   public function add_review(){

$name = $this->input->post('name');
$rating = $this->input->post('rate');


$dataDB = array(
  'full_name' => $name,
  'rating' => $rating
);

if($this->functions->submit($dataDB)){
  $this->session->set_flashdata('review_submitted', true);
  redirect(base_url() . 'reviews/index', 'refresh');
  }

 }

这是我使用的一些 CSS，也许问题与没有 cursor 的移动浏览器有关？

.rate{
    width:245px; height: 40px;
    margin-bottom:0px;
}
 .rate .rate-btn{
    width: 45px; height:40px;
   float: left;
   background: url(rate-btn.png) no-repeat;
    cursor: pointer;
    cursor:hand;
    pointer-events: auto;

   }
  .rate .rate-btn:hover, .rate  .rate-btn-hover, .rate  .rate-btn-active{
    background: url(rate-btn-hover.png) no-repeat;
   }

Answer 1

通过ajax传递数据时，我认为最好使用JSON dataType。 改革数据类型（字符串 -> 数据对象）。 此外，我认为没有必要将“待发送”数据连接成字符串。

如果要发送动态数据，可以按条件推送元素

$.ajax({
    type : "POST",
    dataType: 'text' //it is not necessary if you are not returning any data (if you return json, put 'JSON'),
    url : "<?php echo base_url(); ?>index.php/reviews/add_review",
    data: dataRate, //change to {key:value,key:value}
    success:function(data){

    }
});

Answer 2

这只是为了解决您的 AJAX 发布值未仅出现在您期望的位置的问题。

有无数种方法可以编写代码，但这只是我为了执行调试而更改的一种。 甚至我也学会了一个新的技巧。

只是 Nit Picking 但在阅读代码时突出的是当您在 JS 中的其他任何地方都使用驼峰式大小写时使用therate ，所以它应该是theRate 。选择一个标准并坚持它是个好主意。

另外，您的 JS 中似乎有嵌套事件。 一些试图让 theRate 正常工作的尝试？ 反正...

第一件事。 回到一些基本的东西，然后按照自己的方式工作。 （尽管在这种情况下，我并没有将您的视图剥离成裸露的骨头，但我对您的 controller 做了。

你的观点。 我不得不稍微改变一下，希望评论能解释清楚。

我称它为rating_view.php

<form name="my-form" id="my-form">
    <div class="rate">
        <div id="1" class="btn-1 rate-btn">1</div>
        <div id="2" class="btn-2 rate-btn">2</div>
        <div id="3" class="btn-3 rate-btn">3</div>
        <div id="4" class="btn-4 rate-btn">4</div>
        <div id="5" class="btn-5 rate-btn">5</div>
    </div>
    <input type="submit">
</form>
<!-- Added for viewing debug response -->
<div id="json-debug-output"></div>

<!-- Some styles added as non were provided -->
<style>
    .rate-btn-hover {
        background: blue;
    }
    .rate-btn-active {
        background: yellow;
    }
</style>
<script src= <?= base_url('assets/js/jquery_v3.4.1.js'); ?>></script>

<script>
    $(document).ready(function () {
        // Define your Dom Elements ONCE for efficiency etc
        let domRateButton = $('.rate-btn');
        let domMyForm = $('#my-form');
        let theRate = 0; // Declares this as a Global Var.

        let domJsonDebugOutput = $('#json-debug-output');

        // Hover
        domRateButton.hover(function () {
            domRateButton.removeClass('rate-btn-hover');
            let theRate = $(this).attr('id');
            for (let i = theRate; i >= 0; i--) {
                $('.btn-' + i).addClass('rate-btn-hover');
            }
        });

        // Click
        domRateButton.click(function () {
            console.log('Rating Button Clicked');
            theRate = $(this).attr('id');
            domRateButton.removeClass('rate-btn-active');
            for (let i = theRate; i >= 0; i--) {
                $('.btn-' + i).addClass('rate-btn-active');
            }
        });

        // Submit
        domMyForm.on('submit', function (e) {
            e.preventDefault(); // This was missing
            console.log('Posting Rate = ' + theRate);

            $.ajax({
                type: "POST",
                // dataType: 'text',
                dataType: "json",
                url: "<?php echo base_url(); ?>reviews/add_review",
                data: {'act': 'rate', 'post_id':<?= $post_id; ?>, 'rate': theRate},

                success: function (data) {
                    let debugData = JSON.stringify(data);
                    domJsonDebugOutput.text(debugData); // Display in our Debug Div
                },
                error: function (data) {
                    let debugData = JSON.stringify(data);
                    domJsonDebugOutput.text(debugData); // Display in our Debug Div
                }
            });
        });
    });
</script>

请注意 AJAX 中的dataType从text更改为json 。 另请注意， data 是一个数组。

我还将 theRate 的 scope 从本地更改为全局，因此它在函数中是“可找到的”。

不确定您的表单是如何设置的，但我添加了 e.preventDefault(); 防止表单提交测试。

我个人对在任何 JS 代码中嵌入 PHP 变量感到畏缩，我通常将我的 JS 作为外部文件，并通过使用 JS 读取它们来传递 PHP 中的值，但这也有它的优点和缺点。 因此，为了不走得太远，我将其单独留下。

对于您的 Controller - 称为评论。php

public function show() {
    $data['post_id'] = 1; // This comes from somewhere
    $content = $this->load->view('rating_view', $data, TRUE);
    echo $content;
}

/**
 * Called by AJAX
 * Do we need to test this is only called by AJAX?
 */
public function add_review() {
    // Return everything that was sent for debugging
    echo json_encode($this->input->post());
//      var_dump($this->input->post());
    exit();
}

所以在这里我只有一个方法 show() 显示表单和 add_review 来简单地退回发送的内容。 你可以用这个做各种各样的事情。 在这种情况下，一个不错的方面是您不需要使用 console.log），因为您可以在页面上查看所有内容（但仅用于调试）。 这是另一种选择。

因此，试一试，开始更改您的代码，看看有什么效果。 请记住 - 回到基础并挑选不起作用的位。

接下来你会发现你可能会被重定向绊倒。 但这是另一篇文章。