Question

很抱歉，是否已被多次询问，但我无法正常工作。我正在尝试建立一个宁静的网站，我有一个简单的表格：

<form action="/my/path" method="post" id="myformid">
Name <input type="text" name="name">
<input type="submit" value="Test">
</form>

我使用Javascript转换用户输入的数据，然后使用Ajax将它们发送到我的php文件中：

function postData() {
    $('#myformid').on('submit', function(event) {
        event.preventDefault();
        const json = JSON.stringify($("#myformid").serializeArray());
        $.ajax({
            type: "POST",
            url: "/my/path",
            data: json,
            success: function(){},
            dataType: "json",
            contentType : "application/json"
        });
    });
}

我试图像这样读取php上的数据：

$data = json_decode(file_get_contents('php://input'), true);
$name = $data["name"];

如果我使用Postman之类的工具在请求正文中发送JSON，则代码可以正常工作，但是从我使用Ajax测试的结果来看，JSON数据作为POST数据到达，并且可以使用$ _POST [“ name”]进行读取，但不能像我一样使用'php：// input'。

我该如何解决它，以便即使通过Javascript发送也可以接受JSON？

Answer 1

嗨，您可以这样尝试：

首先，我对每个输入都使用id属性，我确实不希望序列化内容，但是那是我，您可以按照自己的方式来做，这里是文件。您的index.php：

 <form method="post" id="myformid">
  Name :<input type="text" id="name" name="name">
  <input type="submit"  value="Test">
  </form>
  <br>
  <div id="myDiv">
  </div>

您的JavaScript：

  //ajax function return a deferred object
    function _ajax(action,data){
      return $.ajax({
        url: 'request.php',
        type: 'POST',
        dataType: 'JSON',
        data: {action: action, data: data}
      })
    }
    //your form submit event
    $("#myformid").on('submit', function(event) {
      //prevent post
      event.preventDefault();
      //validate that name is not empty
      if ($("name").val() != "") {
        //parameters INS is insert data is the array of data yous end to the server
        var action = 'INS';
        var data = {
          name: $("#name").val()
        };
        console.log(data);
        //run the function and done handle the function
        _ajax(action,data)
        .done(function(response){
          console.log(response);
          //anppend name to the div
          $("#myDiv").append("<p>"+response.name+"</p>");
        });
      }
    });

您的request.php文件：

<?php
//includes and session  start here
//validate that request parameters are set
if (isset($_POST["action"]) && isset($_POST["data"])) {
  //getters
$action = $_POST["action"];
$data = $_POST["data"];
//switch to handle the action to perfom maybe you want to update with the form too ?
switch ($action) {
  case 'INS':
    // database insert  here..
    //return a json object
    echo json_encode(array("name"=>$data["name"]));
    break;
}
}
 ?>

结果：

希望对您有帮助=）

Answer 2

您可以直接在ajax请求中设置表单序列化以发送参数

function postData() {
    $('#myformid').on('submit', function(event) {
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: "/my/path",
            data: $("#myformid").serialize(),
            success: function(){},
            dataType: "json",
            contentType : "application/json"
        });
    });
}

您可以使用 $ _ POST

在您的PHP中获得POST

print_r($_POST);

Answer 3

来自.serializeArray()的{{3}}。

.serializeArray（）方法创建一个JavaScript对象数组，准备将其编码为JSON字符串。

在同一页中给出的示例中，很明显，您将在php中获得一个数组，要访问元素，您应该尝试-

`$data[0]['name']`

另外，您是否尝试过print_r（$ data），它是否为NULL？

Answer 4

更改您的Ajax代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawer2"
        android:fitsSystemWindows="true"
        tools:context="com.example.myproject.ContentActivity">
    <android.support.design.widget.CoordinatorLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
    >
    <android.support.design.widget.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:theme="@style/AppTheme.AppBarOverlay"
            android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                app:title="Устройство автомобиля">

            <ImageView
                    android:id="@+id/toolbarImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:src="@drawable/b320382"
                    app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:minHeight="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:id="@+id/texttest"
              android:paddingStart="14dp"
              android:paddingEnd="14dp"
              android:textSize="16sp"
              android:textColor="@android:color/black"
              android:textAppearance="@android:style/TextAppearance.Small"/>
    </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/white"
            app:itemIconTint="@color/darkgray"
            app:itemTextColor="@color/darkgray"
            app:menu="@menu/drawermenu"
            android:fitsSystemWindows="true"
            android:id = "@+id/nav2"
            android:layout_gravity = "start"
            app:headerLayout="@layout/header"
            tools:ignore="MissingConstraints">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

还需要对表单进行一些更改

$('#btnSubmit').on('click', function(event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "/new.php",
        data: $("#myformid").serialize(),
        dataType: "json",
        success: function(response) {
            console.log(response);
        }
    });
});

您可以在<form action="new.php" method="post" id="myformid"> Name <input type="text" name="name"> <input id="btnSubmit" type="button" value="Test">这样的php文件中获取POST数据

从php获取用Ajax发送的数据？

4 个答案: