javascript - 使用多种类型的数据发布请求

Question

我创建了下面的表单，当按下提交按钮时，它假设发出一个发布请求，并在 php 中将其添加到 mysql。但是，当执行发布请求时，我不断收到 Post 500(内部服务器错误)。

表单

<form method="post" action="">

  <div class="reg_section personal_info">
    <input type="text" id="title" value="" placeholder="Campnavn" required="required" maxlength="25">


    <textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
    <div class="upload">
      <input type="file" name="upload" accept="image/*" id="image" />
      <span class="fileName">Select file..</span>
    </div>

  </div>

  <div>
    <span class="submit" style="text-align: left; padding: 0 10px;"><input type="submit" id="insert" value="Tilføj"></span>
    <span class="submit" style="text-align: right; padding: 0 10px;"><input TYPE="button" value="Fortryd" onclick="div_hide();"></span>
  </div>

</form>

javascript

$( document ).ready(function() {
    $("#insert").click(function(e) {

        var description = $('#description').val();
        var title = $('#title').val();

        var image = $("#image").serialize()


        $.post("insert.php",
        {
           title:  title,
           body: description,
           longitude: currentMarker.lng(),
           latitude: currentMarker.lat(),
           image: image
        }, function (data) {

        }).error(function () {

        });
    });
});

insert.php

<?php


      include('config.php');



      if (isset($_POST['title']) && isset($_POST['body']) && isset($_POST['longitude']) && isset($_POST['latitude']))) {
        $target_dir = "image/";


        $title = $_POST['title'];
        $body = $_POST['body'];
        $longitude = (float)$_POST['longitude'];
        $latitude = (float)$_POST['latitude'];
        $image = $_FILES['image'];

        $strSQL = $db->query("INSERT INTO camps (title, body, longitude, latitude, image) VALUES ('$title',  '$body', '$longitude','$latitude', '$image')");



      }



?>

Answer 1

请试试这个，我更改 <form>标记我添加 id 和名称，并将提交按钮更改为普通按钮

<button type="button" onclick="postdata();" id="insert" >Tilføj</button>

在我为按钮定义了一个 onclick 函数之后...

表单

        <form id="FormData" name="FormData">

          <div class="reg_section personal_info">
            <input type="text" id="title" value="" placeholder="Campnavn" required="required" maxlength="25">


            <textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
            <div class="upload">
              <input type="file" name="upload" accept="image/*" id="image" />
              <span class="fileName">Select file..</span>
            </div>

          </div>

          <div>
            <span class="submit" style="text-align: left; padding: 0 10px;">
<button type="button" onclick="postdata();" id="insert" >Tilføj</button>
    </span>
            <span class="submit" style="text-align: right; padding: 0 10px;">
<input TYPE="button" value="Fortryd" onclick="div_hide();"></span><br><br>
    <span id="result" style="color:#9B0E11; font-size:13px; font-weight:700"></span>
          </div>

        </form>

JavaScript

<script type="text/javascript">
    function postdata() {
    var description = $('#description').val();
    var title = $('#title').val();
    var image = $("#image").serialize();

       $.ajax({
            type: 'POST',
            url: 'insert.php',
            data: {
                desc: desctiption, 
                title: title, 
                image:image, 
                longitude: currentMarker.lng(),
                longitude: currentMarker.lat(),
                   },
            success: function (answer) {
                $("#result").html(answer) // if you wanna get response from insert.php
                $("#FormData")[0].reset(); // if you wanna reset form after submit
            }
        })
    }
</script>

PS: 在insert.php中你在if语句的末尾添加了一个")"你必须删除它

if (isset($_POST['title']) && isset($_POST['body']) && isset($_POST['longitude']) && isset($_POST['latitude'])){