AJAX 轉 PHP，無需頁面刷新

Question

我在讓我的表單將數據提交到我的 PHP 文件時遇到了一些麻煩。

如果沒有我擁有的 AJAX 腳本，表單會將用戶帶到“xxx.php”並提交數據庫中的數據，但是當我包含此腳本時，它會阻止頁面刷新、顯示成功消息並淡入'myDiv' 但隨后數據庫中沒有數據出現。

任何指向正確方向的指針將不勝感激。 把我的頭發拉到這個上面。

HTML

<form action='xxx.php' id='myForm' method='post'>
    <p>Your content</p> 
    <input type='text' name='content' id='content'/> 
    <input type='submit' id='subbutton' name='subbutton' value='Submit' /> 
</form>
<div id='message'></div>

JavaScript

<script>   
    $(document).ready(function(){
        $("#subbutton").click(function(e){
            e.preventDefault();
            var content = $("#content").attr('value');

            $.ajax({
                type: "POST",
                url: "xxx.php",
                data: "content="+content,
                success: function(html){   
                    $(".myDiv").fadeTo(500, 1);
                },
                beforeSend:function(){
                    $("#message").html("<span style='color:green ! important'>Sending request.</br></br>");
                }
            });

        });
    });
</script>

Answer 1

一些小的更改應該可以讓您啟動並運行。 首先，使用.val()獲取輸入的值：

var content = $("#content").val();

您提到您正在檢查提交按鈕是否isset()但您從未將其值發送到 PHP 函數。 為此，您還需要獲取其值：

var submit = $('#subbutton').val();

然后，在您的 AJAX 函數中正確指定數據：

$.ajax({
    type: "POST",
    url: "xxx.php",
    data: {content:content, subbutton: submit}
    ...

不需要對數據屬性名稱的報價。

在 PHP 方面，您然后檢查像這樣的提交按鈕 -

if('submit' == $_POST['subbutton']) {
    // remainder of your code here

內容將在$_POST['content']可用。

Answer 2

將數據屬性更改為

data:{
    content:$("#content").val()
}

還將屬性錯誤添加到 ajax 中

error:function(e){
   console.log(e);
 }

並嘗試在您的 php 文件中將 var dump 返回到 $_POST。

最重要的是根據您發送的內容向 ajax 添加 dataType 屬性：

dataType: "text" //text if You try with the var dump o json , whatever.

另一種解決方案是：

  $.ajax({
   type: "POST",
   url: "xxxwebpage..ifyouknowhatimean",
   data: $("#idForm").serialize(), // serializes the form's elements.
   dataType:"text" or "json" // According to what you return in php
   success: function(data)
   {
       console.log(data); // show response from the php script.
   }
 });

Answer 3

在 Ajax 請求中像這樣設置數據類型： data: { content: content }

我認為這不是正確的 JSON 格式。