You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Ajax jQuery提交HTML表单数据至服务器失败问题排查

avatar
DevOps 小满
2026-8-11
问题描述

我正在用Ajax jQuery将HTML表单数据保存到服务器，查阅了大量谷歌及Stack Overflow教程，但数据始终无法插入服务器。按下F12调试未发现控制台报错，以下是我的HTML代码与PHP代码，请帮忙指出问题所在：

HTML代码 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Mcss.css">
<link rel="stylesheet" href="menu.css">
</head>
<body style="margin:0; padding:0;">
 <div class="main">

   <div class="dd"></div>
    <center>
      <img class="image" src="HLogo.png"/>
    </center>
   <div class="dd1"></div>
    <div class="dd2">
     <center>
       <p class="tt"><b>Harshal Trading Co.</b></p>
     </center>
   </div>

   <div id="container">
     <ul id="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="product.html">Products</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="#">Order Now</a></li>
      <li><a href="#">Online Payment</a></li>
    </ul>
  </div>


   <div style="width:100%; height:500px;background:#DCDCDC">

    <p style="margin-top:10px;font-size:30px;position:absolute;margin-left:2%;"><b>Place your 
     order here</b></p>

   <form id="myform" action="" method="post">
    <table style="width:100%; margin-top:60px; margin-left:2%;position:absolute">
        <tr >
            <td style="margin:0;padding:0;width:1%;"><label for="name">Order Ref:</label></td>
            <td style="width:80%;"><label for="name" id="dtime">Order Ref:</label><br><br</td>
        </tr>
        <tr >
            <td style="margin:0;padding:0;width:1%;"><label for="name">Name:</label></td>
            <td style="width:80%;"><input type="text" id="fname" name="fname" 
                       style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="mobile">Mobile:</label></td>
            <td><input type="text" id="mob" name="mob" style="height:35px;width:30%;padding- 
                 left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="eml">Email:</label></td>
            <td><input type="text" id="email" name="email" 
                 style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="sb">Subject:</label></td>
            <td>    <input type="text" id="subj" name="subj" 
                     style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="dtt">Details:</label></td>
            <td><textarea name="det" cols="40" rows="5" id="det"  style="padding- 
                left:5px;padding-top:5px;"></textarea><br><br></td>
        </tr>
        <tr></tr><tr></tr><tr><td>
        </td><td>
         <input type="submit" class="button" name="insert" value="insert" style="width:100px; 
             height:40px"/></td></tr>
    </table>
    
  </form>


   </div>

   </div>


   <div style="width:100%; height:300px;background-color:#DCDCDC;position:absolute;margin- 
    top:10px;text-align:center">
     
   <p style="font-family: 'Trebuchet MS', sans-serif;
      font-size:30px;
      margin:0;
      padding:0;
      margin-top:20px;color:red"><b><u>We Are Also Available On Following Link</u></b></p>
   
      
              <div class="dol">
                  <a href="https://www.facebook.com/profile.php?id=100087646165162">
                    <img src="logo/fb.webp" style="width:80px;height:80px;float:left;"/>
                       
                  </a>
                  
              </div >
         
              <div class="dol">
                  <a href="https://twitter.com/harshaltrading">
                       <img src="logo/tol/ng/tw.png" 
 style="width:80px;height:80px;float:left;"/>
               
                  </a>
              
              </div>
   
              <div class="dol">
                  <img src="logo/tol/ng/insta.png"style="width:80px;height:80px;float:left;"/>
       
              </div>
              
              <div class="dol">
                  <a href="https://www.youtube.com/">
                      <img src="logo/tol/yt.png" style="width:80px;height:80px;float:left;"/>
            
                  </a>
                 
              </div>
              
              
              
              <p style="font-family: 'Trebuchet MS', sans-serif;
                        font-size:20px;
                        margin:0;
                        padding:0;
                        margin-top:15px;"><a href="#"><b>Privacy Policy</b></a></p>



              <p style="font-family: 'Trebuchet MS', sans-serif;
                        font-size:20px;
                        margin:0;
                        padding:0;
                        margin-top:15px;"><a href="#"><b>Terms & Condition</b></a></p>


     </div>


    <script >

       var dateDiv = document.getElementById('dtime');

        Object.defineProperty(Date.prototype, 'YYYYMMDDHHMMSS', {
        value: function() {
         function pad2(n) {  // always returns a string
        return (n < 10 ? '0' : '') + n;
    }

    return this.getFullYear() +
           pad2(this.getMonth() + 1) + 
           pad2(this.getDate()) +
           pad2(this.getHours()) +
           pad2(this.getMinutes()) +
           pad2(this.getSeconds());
    }
   });

    dateDiv.innerHTML = new Date().YYYYMMDDHHMMSS();

   </script>

  <script language="JavaScript" type="text/javascript" src="jquery-3.6.1.min.js"></script>
   <script>

     $(document).on('click', '.button', function(){
      var dtime = $("#dtime").val();
      var fname = $("#fname").val();
      var mob =   $("#mob").val();
      var email = $("#email").val();
      var subj =  $("#subj").val();
      var det =   $("#det").val();

  jQuery.ajax({
  type: "POST",
  url: "http://harshaltrading.com/DBInsert/topinsert.php",
  dataType: 'json',
  data: {dtime: dtime, fname: fname, mob: mob, email: email, subj: subj, det: det},
    success: function(res) {
      if (res)
      {
        alert('Hurray! Successfully done');
      }
    },
    error: function(xhr) {
      if (xhr)
      {
        alert('There was an error');
       }
    }
  });
 });



  </script>

 </body>
 </html>

PHP代码 

<?php
  include 'DatabaseConfig.php' ;

  $con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);

  if(!$con) {
   echo 'Not connected to server!';
  }

  $dtime = $_POST['dtime'];
  $fname = $_POST['fname'];
  $mob = $_POST['mob'];
  $email = $_POST['email'];
  $subj = $_POST['subj'];
  $det = $_POST['det'];


  $Sql_Query = "insert into myorder (oid,name,mobile,email,sub,odet) values 
  ('$dtime','$fname','$mob','$email','$subj','$det')";

 if(mysqli_query($con,$Sql_Query)){

  echo 'Thanks';
 }
 else{
  echo 'Try Again'; }
  mysqli_close($con);    
?>
问题排查与修复方案
  • 表单默认提交行为未阻止：点击提交按钮时，浏览器会触发表单默认提交动作，导致页面刷新，Ajax请求被中断。需在点击事件中添加e.preventDefault()阻止默认行为。
  • Order Ref值获取方式错误：#dtime是<label>标签，.val()无法获取其内容，需改用.text()或.html()。
  • Ajax数据类型不匹配：PHP返回纯文本，但Ajax设置dataType: 'json'会导致解析失败进入错误回调。可去掉dataType让jQuery自动识别，或改为dataType: 'text'。
  • SQL注入风险与语法错误：直接拼接用户输入到SQL语句存在注入风险，且输入含单引号会导致SQL语法错误，必须使用预处理语句绑定参数。
  • PHP错误信息缺失：当前代码仅返回简单提示，无法排查具体错误，需开启错误提示并输出详细错误信息。

修改后的JavaScript代码 

$(document).on('click', '.button', function(e){
    // 阻止表单默认提交
    e.preventDefault();
    
    var dtime = $("#dtime").text();
    var fname = $("#fname").val();
    var mob = $("#mob").val();
    var email = $("#email").val();
    var subj = $("#subj").val();
    var det = $("#det").val();

    jQuery.ajax({
        type: "POST",
        url: "http://harshaltrading.com/DBInsert/topinsert.php",
        data: {dtime: dtime, fname: fname, mob: mob, email: email, subj: subj, det: det},
        success: function(res) {
            if (res.includes('Thanks')) {
                alert('Hurray! Successfully done');
            } else {
                alert('提交失败: ' + res);
            }
        },
        error: function(xhr, status, error) {
            alert('请求出错: ' + error + '，状态码: ' + status);
        }
    });
});

修改后的PHP代码（含预处理语句与错误处理） 

<?php
include 'DatabaseConfig.php';

// 开发环境开启错误提示，生产环境关闭
error_reporting(E_ALL);
ini_set('display_errors', 1);

$con = mysqli_connect($HostName, $HostUser, $HostPass, $DatabaseName);

if (!$con) {
    die('数据库连接失败: ' . mysqli_connect_error());
}

// 检查必填字段是否存在
$required = ['dtime', 'fname', 'mob', 'email', 'subj', 'det'];
foreach ($required as $field) {
    if (!isset($_POST[$field]) || empty($_POST[$field])) {
        die('缺少必填字段: ' . $field);
    }
}

$dtime = $_POST['dtime'];
$fname = $_POST['fname'];
$mob = $_POST['mob'];
$email = $_POST['email'];
$subj = $_POST['subj'];
$det = $_POST['det'];

// 使用预处理语句防止SQL注入
$Sql_Query = "INSERT INTO myorder (oid, name, mobile, email, sub, odet) VALUES (?, ?, ?, ?, ?, ?)";
$stmt = mysqli_prepare($con, $Sql_Query);

// 绑定参数（s代表字符串类型，可根据字段类型调整）
mysqli_stmt_bind_param($stmt, 'ssssss', $dtime, $fname, $mob, $email, $subj, $det);

if (mysqli_stmt_execute($stmt)) {
    echo 'Thanks';
} else {
    echo 'Try Again. 错误信息: ' . mysqli_stmt_error($stmt);
}

mysqli_stmt_close($stmt);
mysqli_close($con);
?>

内容的提问来源于stack exchange，提问作者user2741987

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.11 02:45:36