2017-11-25 138 views
1

我试图使用Ajax将数据传递给PHP文件,然后保存到MySQL数据库。由于某些原因,它不起作用。我用HTML表单传递数据测试了PHP代码,并且它正在工作。当使用Ajax时,点击提交按钮后会发生错误。我认为问题出在Ajax数据参数中。使用Ajax将数据传递给PHP文件

下面是代码:

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); 
?> 
+1

使用'数据:{sifra:sifra,barkod:barkod,naziv:naziv,mjera:mjera,范围:cijena,kolicina:kolicina,ukupno:ukupno}'代替。即通过一个单一的对象,而不是一堆对象... – davidkonrad

+0

什么是你的文件结构?即HTML表单文件和处理器文件的位置和名称?另外,浏览器控制台的输出是什么?它是否释放任何错误? – SaidbakR

回答

1

问题的原因是您正在使用type: 'POST'的事实。引述docs

传递给经由 HTTP POST方法当前脚本变量的数组使用应用程序/ x-WWW窗体-urlencoded或 的multipart/form-data的作为当HTTP的Content输入请求。

POST是一个比较“老土”的方法,通常你会张贴<form>其中内容自动为系列化,即urlencoded的,但你尝试在JSON格式的POST数据。你应该做的是要么考虑你是否真的需要POST。如果将其更改为GET(或者只是删除type: 'POST')并通过$_GET访问传递的数据,那么它将工作(只要您更正了data)。

如果没有,更改内容类型来表示传入urlencoded的数据:

$.ajax({ 
    type: 'POST', 
    url: 'insert.php', 
    contentType: "application/x-www-form-urlencoded", 
    data: {sifra: sifra, barkod: barkod, naziv: naziv, mjera: mjera, cijena: cijena, kolicina: kolicina, ukupno: ukupno}, 
    success: function(response){ 
    alert(response); 
    } 
}); 

我敢肯定你的代码将现在的工作,也就是$ _ POST作品和任何消息被正确接收为纯文本,你可以警报。

+0

谢谢。现在它正在工作。 :) – Josip

3

你应该提供的值的$.ajaxdata属性作为一个单一的对象不是他们的集合:

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

而且,你注意你的PHP代码是敞开的SQL注入攻击是非常重要的攻击。您应该更改逻辑以尽快使用准备好的语句。

+0

感谢您的回复,但仍然无法正常工作。 – Josip

+0

@Josip,究竟是不是工作?第三个问题是dataType:'json',但是你传回纯文本,这将无故提出AJAX错误,但问题是,数据是否插入到数据库中? – davidkonrad

+0

不,数据没有插入数据库,这是问题所在。 – Josip