javascript - 如何将 PHP 行记录插入到 AJAX url 中

Question

我可以将 update.php?id=". $row["id"] . " 插入 AJAX url 吗？ 我正在尝试通过表单进行异步 sql 行更新。我没有具体的 id，因为 id 是在点击时调用的。

JS

  submit.on('click', function(e) {
            e.preventDefault();
            if(validate()) {
                $.ajax({
                    type: "POST",
                    url: 'update.php?id=" . $row["id"] . "',
                    data: form.serialize(),
                    dataType: "json"
                }).done(function(data) {
                    if(data.success) {
                        id.val('');
                        cas.val('');
                        info.html('Message sent!').css('color', 'green').slideDown();
                    } else {
                        info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
                    }
                });
            }
        });

PHP update.php 调用所在位置

$sql3 = "
SELECT id, potnik_id, ura, naslov
FROM prevoznik 
ORDER BY HOUR(ura), MINUTE(ura) ASC;
";
$result = $conn->query($sql3);
$potnik = $row["potnik"];
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {

        //Spremenjena oblika datuma
        $date = date_create($row["ura"]);
        $ura_pobiranja = date_format($date,"H:i");
        echo "<div class=\"row list  divider-gray\">
                <div class=\"col-1 fs-09 fw-600\">" . $row["id"] . " </div>
                  <div class=\"col-3 flex-vcenter-items fw-600 fs-09\">" . $row["naslov"] . " </div>
                <div class=\"col-1 flex-vcenter-items fw-600 fs-09\">$ura_pobiranja</div>
            ";

        if ($row["naslov"] !== null) {
            echo " <div class=\"col-6 flex-vcenter-items fs-1\">Nastavi uro<form id='form' action='update.php?id=" . $row["id"] . "' method='POST'><input id='id' name='potnik' value='".$row["id"]."' type='hidden' /> <input id='cas' class=\"form-control fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/><input id='submit' type='submit' value='Posodobi'>    <label id=\"info\"></label></form></div>";
            echo " </div>";
        }
        else {
            echo " </div>";
        }

    }
} else {
    echo "<div class=\"col flex-vcenter-items fw-100 fs-1\"><i class=\"far fa-frown-open pr-3\"></i>Nimaš še nobenih opravil
                                    </div>";
}

Answer 1

首先，您需要修复大量 HTML。各种 HTML 元素有许多重复的 ID 属性。这将导致许多 JavaScript 问题，并且是不正确的 HTML 语法。

  $html = ""
  $id = $row['id'];
  if ($row["naslov"] !== null) {
    $html .= "<div class='col-6 flex-vcenter-items fs-1'>\r\n";
    $html .= "\tNastavi uro\r\n";
    $html .= "\t<form id='form-$id' action='update.php?id=$id' method='POST' data-id='$id'>\r\n";
    $html .= "\t\t<input id='cas-$id' class='form-control fancy-border' type='text' name='posodobljeni_cas' />\r\n";
    $html .= "\t\t<input id='submit-$id' type='submit' value='Posodobi'>    <label id='info-$id'></label>\r\n";
    $html .= "\t</form>\r\n</div>\r\n";
    $html .= "</div>";
    echo $html;
  } else {
    echo " </div>";
  }

您可以看到这里已经完成了很多工作。首先，我们创建一个 $html 和 $id 变量以使事情变得更容易。现在，当我们将字符串数据输入到 $html 变量中时，如果我们使用 " (双引号)进行换行，我们可以只使用 $id 直接在字符串中。我们还将使用 '(单引号)来包装所有 HTML 元素属性。

在你的 jQuery 中试试这个:

$(function(){
  $("form[id|='form']").on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var id = form.data("id");
    var cas = $("inptu[id|='cas']", form);
    var info = $("input[id|='info']", form);
    if(validate()) {
      $.ajax({
       type: "POST",
       url: form.attr("action"),
       data: form.serialize(),
       dataType: "json"
     }).done(function(data) {
       if(data.success) {
         id.val('');
         cas.val('');
         info.html('Message sent!').css('color', 'green').slideDown();
       } else {
         info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
       }
     });
   }
 });
});

有关选择器的更多信息:https://api.jquery.com/attribute-contains-prefix-selector/

无法对此进行测试，因为您尚未提供测试区域。希望对您有所帮助。