javascript - Ajax 请求每次都重复

问题描述

我在我的表单中有多个 ajax 请求，例如我在我的表单中为产品添加了大小按钮当用户单击它时它会插入一个大小的输入元素所以我的问题是我的表单上有 sku 生成器它的作用如果指定了尺寸，将为我的产品生成带有颜色名称和尺寸的 sku 问题是每次重复的 ajax 请求意味着

两个字段的js代码

    $(document).on('click', '.btn_size', function() {
        let size = $(this).val();
        $.ajax({
            url: "../app/ajax/ajax.php",
            method: "post",
            data: {
                size: size
            },
            cache: false,
            success: function(data) {
                let data2 = $.parseJSON(data);
                if (data2.success !== '') {
                    $('.size_wrapper').html(data2.success);
                }
            }
        });
    });

     $(document).on("click", ".generate_sku", function() {
        let $id = $(this).attr("data-id");
        let $form = document.getElementById('product_form');
        let generateSku = $(this).val();
        let formData = new FormData($form);
        formData.append('id', $id);
        formData.append('generate_sku', generateSku);
        $.ajax({
            url: "../app/ajax/ajax.php",
            method: "post",
            data: formData,
            success: function(data3) {
                console.log(data3);
                // let data2 = $.parseJSON(data);
                // if (data2.success !== '') {
                //     $("#sku" + $id).val(data2.success);
                //     manageErrors();
                // }
                // if (data2.error !== '') {
                //     $.each(data2.error, function(index, element) {
                //         $("#product_form").find("input[name='" + index + "']").addClass("form_error");
                //         $("#product_form").find("input[name='" + index + "']").next(".error").html(element);
                //     });
                // }
            },
            contentType: false,
            cache: false,
            processData: false
        });
    });

两个字段的php代码

    if(isset($_POST['size']))
   {
      $size = new SizeClass();

      $allSizes = $size->showAll();
      $data = "<div class='form-group'><label for='size'>Size</label> 
      <select class='form-control' id='size' name='size'><option 
      value=''>Select</option>";
     while($row = $allSizes->fetch(PDO::FETCH_ASSOC))
     {
      $sizeName = $row['size_name'];
       $sizeId = $row['size_id'];
       $data .= "<option value='$sizeId'>$sizeName</option>";
      }

     $data .= "</select></div>";
     $data .= "<div class='form-group'><label for='size_price'>Size 
    Price</label><input type='text' class='form-control' name='size_price' 
    placeholder='If this size has different price add here' 
    id='size_price'></div>";

    echo json_encode(["success" => $data]);
  }




  if(isset($_POST['generate_sku']))
  {
  if(!empty($_POST['size']))
   {
    $id = $_POST['id'];
    if(!empty($_POST["color_name$id"]))
    {
        $size = new SizeClass();
        $sizeFind = $size->find($_POST['size']);
        $row = $sizeFind->fetch(PDO::FETCH_ASSOC);
        $size = str_split($row['size_name']);
        $sizeName = '';
        for ($i = 0; $i <= 2; $i++) {
            $sizeName .= $size[$i];
        }
        $color = str_split($_POST["color_name$id"]);
        $colorName = "";
        for ($i = 0; $i < 2; $i++) {
            $colorName .= $color[$i];
        }
        $randomid = mt_rand(1000, 9999);

        $sku = $sizeName . "-" . $colorName . "-" . $randomid;

        echo json_encode(["success" => $sku]);
    }
    else
    {
        $error = [];
        $error["color_name$id"] = "Color name must be required";

        echo json_encode(["error" => $error]);
    }
    }
    else
   {
    $id = $_POST['id'];
    if(!empty($_POST["color_name$id"]))
    {
        $color = str_split($_POST["color_name$id"]);
        $colorName = "";
        for ($i = 0; $i < 2; $i++) {
            $colorName .= $color[$i];
        }
        $randomid = mt_rand(1000, 9999);
        $colorName .= "-" . $randomid;
        echo json_encode(["success" => $colorName]);
    }
    else
    {
        $error = [];
        $error["color_name$id"] = "Color name must be required";

        echo json_encode(["error" => $error]);
    }

    }
   }

预期输出是针对一个请求，这将返回 2 个请求，不知道为什么

意味着它正在返回

    {"success":"<div class='form-group'><label for='size'>Size<\/label> 
    <select class='form-control' id='size' name='size'><option 
    value=''>Select<\/option><option value='1'>Xl<\/option><option 
    value='2'>Medium<\/option><option value='3'>Small<\/option><\/select> 
    <\/div><div class='form-group'><label for='size_price'>Size 
    Price<\/label><input type='text' class='form-control' name='size_price' 
    placeholder='If this size has different price add here' id='size_price'> 
    <\/div>"}{"error":{"color_name1":"Color name must be required"}}

预期结果

   {"error":{"color_name1":"Color name must be required"}}

调试详细是这里

当我 console.log(data) 答案是

    {"success":"<div class='form-group'><label for='size'>Size<\/label><select class='form-control' id='size' name='size'><option value=''>Select<\/option><option value='1'>Xl<\/option><option value='2'>Medium<\/option><option value='3'>Small<\/option><\/select><\/div><div class='form-group'><label for='size_price'>Size Price<\/label><input type='text' class='form-control' name='size_price' placeholder='If this size has different price add here' id='size_price'><\/div>"}{"error":{"color_name1":"Color name must be required"}}

在网络选项卡 2 请求中

  both are from same file 

  one for size 

  success: "<div class='form-group'><label for='size'>Size</label><select class='form-control' id='size' name='size'><option value=''>Select</option><option value='1'>Xl</option><option value='2'>Medium</option><option value='3'>Small</option></select></div><div class='form-group'><label for='size_price'>Size Price</label><input type='text' class='form-control' name='size_price' placeholder='If this size has different price add here' id='size_price'></div>"


  2nd for color 

  but it is repeating size request 

  {"success":"<div class='form-group'><label for='size'>Size<\/label><select class='form-control' id='size' name='size'><option value=''>Select<\/option><option value='1'>Xl<\/option><option value='2'>Medium<\/option><option value='3'>Small<\/option><\/select><\/div><div class='form-group'><label for='size_price'>Size Price<\/label><input type='text' class='form-control' name='size_price' placeholder='If this size has different price add here' id='size_price'><\/div>"}{"error":{"color_name1":"Color name must be required"}}

我希望现在你们明白我想问的问题

标签： javascriptphpjqueryajaxlaravel

javascript - Ajax 请求每次都重复

问题描述

解决方案

推荐阅读