javascript - 如何在通过热敏打印成功完成先前的 AJAX 打印请求后执行 AJAX 请求
问题描述
我对 AJAX 请求有一些问题。正如标题所说，我想在成功之前的 AJAX 之后执行 AJAX 请求，以通过热敏打印机打印。
到目前为止，我有一些具有 3 个不同 ID 的按钮。每个ID都会执行一个AJAX请求来查询数据库的更新，并且它成功了。但随后我想通过escpos-php执行另一个 AJAX 请求以通过热敏打印机（QPOS Q58M）进行打印。结果认为它是成功的，但没有打印完成。然后我尝试在没有 AJAX 的情况下执行打印脚本，它成功了。
这是 HTML 视图
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Certificate</div>
</button>
<button id="simpan_antrian1" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian1"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Test</div>
</button>
<button id="simpan_antrian2" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian2"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Course</div>
</button>
<button id="simpan_antrian3" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian3"></div>
</button>
</div>
</div>
这是调用请求的脚本
<script type="text/javascript">
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
});
</script>
更新
好吧，我尝试制作一个新的打印按钮，这样它就不会发出嵌套的 AJAX 请求，但不幸的是仍然无法做到这一点......这是我最后的改变
HTML
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Certificate</div>
</button>
<button id="simpan_antrian1" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian1"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Test</div>
</button>
<button id="simpan_antrian2" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian2"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Course</div>
</button>
<button id="simpan_antrian3" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian3"></div>
</button>
</div>
<div class="col-lg-12 col-md-12 col-xs-12">
<button class="btn btn-app btn-purple" id="print">
<i style="font-size:2em" class="ace-icon fa fa-print"></i> Print your ticket
</button>
</div>
</div>
Javascript
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(msg){
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
$("#print").on('click',function () {
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing");
}
});
})
});
好吧仍然无法进行打印，但 AJAX 将其响应为成功
更新
出于文档目的，我将打印脚本放在下面
<?php
//date_default_timezone_set("ASIA/JAKARTA");
// panggil file config.php untuk koneksi ke database
require_once "../../../config/config.php";
// panggil file fungsi nama hari
require_once "../../../config/fungsi_nama_hari.php";
require 'pengunjung/vendor/autoload.php';
use Mike42\Escpos\Printer;
use Mike42\Escpos\PrintConnectors\WindowsPrintConnector;
$hari_ini = date("Y-m-d");
$configID = "1";
// fungsi query untuk menampilkan data dari tabel sys_config
$result = $mysqli->query("SELECT nama_instansi FROM sys_config WHERE configID='$configID'") or die('Ada kesalahan pada query tampil data config: '.$mysqli->error);
$data_config = $result->fetch_assoc();
// fungsi query untuk menampilkan data dari tabel antrian
$result = $mysqli->query("SELECT max(no_antrian) as nomor, loket FROM antrian WHERE tanggal='$hari_ini' ORDER BY no_antrian DESC LIMIT 1") or die('Ada kesalahan pada query tampil nomor antrian: '.$mysqli->error);
$data = $result->fetch_assoc();
$nama_instansi = $data_config['nama_instansi'];
$loket = $data['loket'];
$no_antrian = $data['nomor'];
$hari = date("l");
$tanggal = date("d-m-Y");
$jam = date("H:i:s");
$connector = new WindowsPrintConnector("POS-58");
$printer = new Printer($connector);
$printer->setJustification(Printer::JUSTIFY_CENTER);
/* Name of shop */
$printer -> selectPrintMode(Printer::MODE_DOUBLE_WIDTH);
$printer -> text($nama_instansi."\n");
$printer -> selectPrintMode();
$printer -> text($hari." ".$tanggal." ".$jam."\n");
$printer -> feed();
/* Title of receipt */
$printer -> setEmphasis(true);
$printer -> text("YOUR QUEUE\n");
$printer -> setEmphasis(false);
$printer -> feed();
//
$printer -> setJustification(Printer::JUSTIFY_CENTER);
$printer -> setTextSize(8, 8);
$printer -> text($no_antrian."\n");
$printer -> setTextSize(4, 4);
$printer -> text($loket."\n");
$printer -> feed();
$printer -> cut();
$printer -> pulse();
$printer -> close();
echo 'sukses';
?>
解决方案
你的js代码有一些错误。检查下面的代码..
<script type="text/javascript">
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(msg){
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
});
</script>
推荐阅读
- sql - 如何在 SQL 中组合两个位列？
- python - 初学者python - 如何导入简单模块
- python - 通过 Xpath 查找硒
- regex - 正则表达式与删除之前和之后
- python - 树莓派 28-BYJ-48 带 uln2003 的步进电机控制
- macos - 无法在 OS X 中将 Chrome 设置为默认网络浏览器
- rust - nom::bits::bits 返回的剩余数据不正确
- c++ - 进一步优化 DP 解决方案的提示
- variables - 使用 openmp 在 Rcpp 中设置 OMP_PLACES 选项
- sequelize.js - Sequelize CLI：如何防止测试数据播种器在生产中运行？