javascript - 使用 Ajax 将数据传递到 PHP 文件

标签 javascript php jquery html ajax

我正在尝试使用 Ajax 将数据传递到 PHP 文件,然后保存到 MySQL 数据库。由于某些原因,它不起作用。我用从 HTML 表单传递的数据测试了 PHP 代码,它工作正常。使用 Ajax 时,单击提交按钮后什么也没有发生。我认为问题出在 Ajax 数据参数中。

代码如下:

HTML

<body>
<div class="container">
  <form class="search" action="" method="">
    <div class="form-group">
      <div class="input-group input-group-lg">
        <span class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></span>
        <input type="text" class="form-control form-control-lg" id="trazi" name="trazi" placeholder="Pretražite artikle - upišite naziv, barkod ili šifru artikla">
      </div>
    </div>
  </form>
  <form class="articles" id="novi_artikl" action="" method="">
      <div class="form-group row">
        <label for="sifra" class="col-sm-4 col-form-label col-form-label-lg">Šifra artikla</label>
        <div class="col-sm-8">
          <input type="text" class="form-control form-control-lg" id="sifra" name="sifra" placeholder="Upišite šifru">
        </div>
      </div>
      <div class="form-group row">
        <label for="barkod" class="col-sm-4 col-form-label col-form-label-lg">Barkod artikla</label>
        <div class="col-sm-8">
          <input type="text" class="form-control form-control-lg" id="barkod" name="barkod" placeholder="Upišite barkod">
        </div>
      </div>
      <div class="form-group row">
        <label for="naziv" class="col-sm-4 col-form-label col-form-label-lg">Naziv artikla</label>
        <div class="col-sm-8">
          <input type="text" class="form-control form-control-lg" id="naziv" name="naziv" placeholder="Upišite naziv artikla" required>
        </div>
      </div>
      <div class="form-group row">
        <label for="mjera" class="col-sm-4 col-form-label col-form-label-lg">Jedinična mjera</label>
        <div class="col-sm-8">
          <input type="text" class="form-control form-control-lg" id="mjera" name="mjera" placeholder="Upišite mjeru" required>
        </div>
      </div>
      <div class="form-group row">
        <label for="cijena" class="col-sm-4 col-form-label col-form-label-lg">Cijena artikla</label>
        <div class="col-sm-8">
          <div class="input-group input-group-lg">
            <input type="text" class="form-control form-control-lg text-right" id="cijena" name="cijena" placeholder="Upišite cijenu" required>
            <span class="input-group-addon">KM</span>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label for="kolicina" class="col-sm-4 col-form-label col-form-label-lg">Količina artikla</label>
        <div class="col-sm-8">
          <input type="text" class="form-control form-control-lg text-right" id="kolicina" name="kolicina" placeholder="Upišite količinu" required>
        </div>
      </div>
      <div class="form-group row">
        <label for="ukupno" class="col-sm-4 col-form-label col-form-label-lg">Ukupna vrijednost artikla</label>
        <div class="col-sm-8">
          <div class="input-group input-group-lg">
            <input type="text" class="form-control form-control-lg text-right" id="ukupno" name="ukupno" placeholder="Ukupna vrijednost" required>
            <span class="input-group-addon">KM</span>
          </div>
        </div>
      </div>

    <br>
    <div class="float-right">
      <button type="submit" class="btn btn-primary btn-lg" id="spremi" name="spremi">Spremi</button>&nbsp;
      <button type="submit" class="btn btn-primary btn-lg" id="ponisti" name="ponisti">Poništi</button>
    </div>
  </form><!-- Content here -->
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/38d56b17e3.js"></script>
<script src="script.js" type="text/javascript"></script>

JavaScript

$('#spremi').click(function(){
var sifra = $('#sifra').val();
var barkod = $('#barkod').val();
var naziv = $('#naziv').val();
var mjera = $('#mjera').val();
var cijena = $('#cijena').val();
var kolicina = $('#kolicina').val();
var ukupno = $('#ukupno').val();

$.ajax({
  type: 'POST',
  url: 'insert.php',
  contentType: "application/json; charset=utf-8",
  dataType:'json',
  data: ({sifra: sifra}, {barkod: barkod}, {naziv: naziv}, {mjera: mjera}, {cijena: cijena}, {kolicina: kolicina}, {ukupno: ukupno}),
  success: function(response){

    alert(response);
  }
});
});

PHP代码

<?php
include("connection.php");

if ($_POST["sifra"]) {
$sifra = $_POST["sifra"];
$barkod = $_POST["barkod"];
$naziv = $_POST["naziv"];
$mjera = $_POST["mjera"];
$cijena = $_POST["cijena"];
$kolicina = $_POST["kolicina"];
$ukupno = $_POST["ukupno"];

$query = "INSERT INTO lista (sifra, barkod, naziv, mjera, cijena, kolicina, ukupno) VALUES ('$sifra', '$barkod', '$naziv', '$mjera', '$cijena', '$kolicina', '$ukupno')";

$results = mysqli_query($dbc, $query);

if($results){
  echo "Artikl je uspješno spremljen.";
}
else {
  echo "Artikl nije spremljen. Došlo je do pogreške.";
}
}
mysqli_close($dbc);
?>

最佳答案

您应该将值提供给 $.ajaxdata 属性作为单个对象而不是它们的集合:

data: {
  sifra: sifra, 
  barkod: barkod,
  naziv: naziv,
  mjera: mjera,
  cijena: cijena,
  kolicina: kolicina,
  ukupno: ukupno
},

此外,请务必注意您的 PHP 代码对 SQL 注入(inject)攻击完全开放。您应该尽快更改逻辑以使用准备好的语句。

关于javascript - 使用 Ajax 将数据传递到 PHP 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47490971/

相关文章:

javascript - 计算24小时时差

javascript - 类似于谷歌日历的日历事件条目

javascript - 如何将可变定价和总计添加到我的预订表格中?

php - 根据 Woocommerce 中的其他购物车商品数量自动将特定产品添加到购物车

Javascript在循环中隐藏对象

javascript - 在 Werkzeug 异常上设置标题

javascript - 某些东西破坏了我在 IE 中的网站

php - 如何使用 Laravel 查询生成器获取两个不同列的总和?

jquery - 如何操作jquery自动完成插件来获取id和值

javascript - JQuery - Onclick - 提醒已过去的时间量