PHP Ajax 表单提交答案

【问题标题】：PHP Ajax Form SubmissionPHP Ajax 表单提交
【发布时间】：2016-06-18 14:38:28
【问题描述】：

我的表单有以下代码：

<form id="editpageform" method="post">
            <div class="form-group">
                <label for="title">Page Title</label>
                <input type="text" id="title" name="title" placeholder="Page Title" value="<?php echo $pageRes["title"];?>" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="description">Page Description (Max 160 Characters)</label>
                <textarea id="description" rows="4" class="form-control" name="description"><?php echo $pageRes["description"];?></textarea>
                <span id="remain_desc"><?php  echo 160 - strlen($pageRes["description"]);?></span>  Characters Remaining
            </div>
            <div class="form-group">
                <label for="body">Page Content</label>
                <textarea name="body" class="form-control tinymce"><?php echo $pageRes["body"];?></textarea>
            </div>
            <div class="form-group">
                <label for="status">Page Status</label>
                <select id="status" class="form-control" name="status">
                    <option value="Draft" <?php echo ($pageRes["status"] == "Draft") ? "selected" : "" ?>>Draft</option>
                    <option value="Published" <?php echo ($pageRes["status"] == "Published") ? "selected" : "" ?>>Published</option>
                </select>
            </div>
            <div class="form-group">
                <label for="url">Page URL</label>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">http://www.champpaw.co.uk/</span>
                    <input type="text" name="url" id="url" value="<?php echo substr($pageRes["slug"], 1);?>" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="menutitle">Menu Title</label>
                <input type="text" name="menutitle" id="menutitle" class="form-control" value="<?php echo $pageRes["menutitle"];?>">
            </div>
            <div class="form-group">
                <label for="menutitle">Menu Order</label>
                <input type="number" name="menu" id="menu" class="form-control" value="<?php echo $pageRes["menu"];?>">
            </div>
            <div class="form-group">
                <input type="hidden" readonly id="id" name="id" value="<?php echo $pageRes["id"];?>">
                <button class="btn btn-default" name="updatepagebtn" id="updatepagebtn">Update Page</button>
            </div>
        </form>

这对于我的 JS：

$('#updatepagebtn').click(function() {
    $(this).preventDefault();
    $.ajax({
       type:"post",
       url:"process/editpage.php",
       data:  $("#editpageform").serialize(),
       success: function(response){
            $(".result").html(response);
       }
    });
});

这是我的process/editpage.php

<?php
    session_start();
    if((!isset($loginpage)) && $_SESSION['logged'] != true){
        header('Location: login.php');
        die();
    }
    require_once("../../config.php");

    if(isset($_POST["updatepagebtn"])){
        $updatepage = $db->prepare("UPDATE content SET title=:title, description=:desc, body=:body, status=:status, slug=:url, menutitle=:menutitle, menu=:menu WHERE id=:id");

        $updatepage->bindParam(':title', $_POST["title"]);  
        $updatepage->bindParam(':desc', $_POST["description"]); 
        $updatepage->bindParam(':body', $_POST["body"]);    
        $updatepage->bindParam(':status', $_POST["status"]);    
        $updatepage->bindParam(':menutitle', $_POST["menutitle"]);  
        $updatepage->bindParam(':menu', $_POST["menu"]);
        $updatepage->bindParam(':id', $_POST["id"]);
        $url = "/".$_POST["url"];
        $updatepage->bindParam(':url', $url);   

        if($updatepage->execute()){
            echo "Success!";
        }else{
            echo "Error updating page. Ensure you have entered a valid and unique URL.";            
        }
    }else{
        echo "Error";
    }

但是，当我提交表单时，它似乎只是重新加载而不是提交表单并更新表格。我尝试将action="process/editpage.php 添加到表单中，然后效果很好，所以我认为问题出在 jQuery 上，但我不确定它是什么。

谁能看到问题并告诉我问题是什么，以便我修复它？

谢谢

【问题讨论】：

控制台日志中有什么内容？
您可以尝试在#editpageform 上进行submit 事件，而不是在#updatepagebtn 上进行click 事件
也尝试修改...function(e) { e.preventDefault();...

标签： javascript php jquery ajax forms

【解决方案1】：

将 jQuery 代码封装在 $(document).ready(function(){ 中还将代码function(e) { $(this).preventDefault() 更改为function(e) { e.preventDefault()

$(document).ready(function() {
  $('#updatepagebtn').click(function(e) {
    $.ajax({
      type: "post",
      url: "process/editpage.php",
      data: $("#editpageform").serialize(),
      success: function(response) {
        $(".result").html(response);
      }
    });
    e.preventDefault();
  });
});

另一种方式

$(document).ready(function() {
  $('#editpageform').submit(function(e) {
    $.ajax({
      type: "post",
      url: "process/editpage.php",
      data: $("#editpageform").serialize(),
      success: function(response) {
        $(".result").html(response);
      }
    });
    e.preventDefault();
  });
});

【讨论】：