通过Jquery和AJAX发送表单数据不能按预期工作

Question

我有一个包含两个提交按钮的表单，我希望它在我提交表单后立即更新当前页面而不刷新整个页面，但代码不断重新加载页面，页面甚至没有更新。

HTML表单

 <form id="paymentForm" style="margin-left: 15%;margin-bottom: 15px;margin-top:15px;font-size: 18px;" action="#">
  <input class="paymentButton" type="submit" name="COD" value="Cash on Delivery(COD)" style="background-color:#F80;color:white;height: 60px;border-radius: 5px ">
  <input class="paymentButton" type="submit" name="POD" value="Paytm on Delivery(POD)" style="margin-left: 25px;background-color: #F80;color:white;height: 60px;border-radius: 5px">

Jquery和AJAX代码

$(document).ready(function(){
      $("#paymentForm").submit(function(e){
      e.preventDefault();
      var buttonpressed;
      var paymentValue;
      $("#paymentbutton").click(function() {
      paymentValue = $(this).attr('value') ;

      });
      $.ajax({ 
         url:"payment.php",
         type:'POST',
         data:"{ 
              buttonValue:paymentValue; 
         }",
         success:function(data){
             getElementById('panel13').innerHTML=data;
         }  
        });
           return false;
      });

    });

正在发送数据的PHP脚本payment.php

<?php
 $paymentMode="" 
 if(isset($_POST["buttonValue"]==POD))
    $paymentMode="Paytm On Delivery";
 else
    $paymentMode="Cash on Delivery";
echo "Your Order is placed succesfully with payment mode as" .$paymentMode;
?>

Answer 1

您在PHP代码中有语法错误

$paymentMode="";

youre mising semicolon ...下次，每次发送ajax请求。打开chrome dev tool -> network -> XHR，查看您的请求真正产生的问题。如果请求失败。点击请求（我有红色）看。后端错误..希望这有用...

Answer 2

您正在使用getElementById，而是使用document.getElementById。希望它有所帮助。