ajax提交表单返回json

AJAX是一种前端技术，可以使我们在不刷新整个页面的情况下更新页面上的部分内容。在应用程序中，此技术也可用于提交表格或表单数据并接收服务器端返回的JSON响应。使用AJAX技术，可以大大地提高用户体验，同时减少网络负载。

// 使用jQuery的AJAX来实现表单提交和数据接收
$('form').submit(function(event){
    // 防止表格默认提交动作
    event.preventDefault();

    // 获取表格数据为JSON对象
    var formData = $('form').serializeArray();
    var jsonData = {};
    $(formData ).each(function(index,obj){
        jsonData [obj.name] = obj.value;
    });

    // 发送AJAX请求
    $.ajax({
        type: "POST",url: "/submit-form",data: jsonData,dataType: "json"
    })
    .done(function( response ) {
        // 在页面上更新响应结果
        $('p.result').text(response.message);
    });
});

在上面的代码中，我们使用了jQuery来提交表单数据。我们首先防止了默认提交行为，然后将表单数据转换为JSON对象并发送数据到服务器端。在接收到JSON响应后，我们可以更新页面上的内容。

对于我们的服务器端，我们应该返回一个JSON响应。这个响应可以包含任何必要的信息，比如一个成功或失败的消息、可能需要重新加载的某部分、甚至是通过AJAX提交的新增记录的ID。

// PHP端代码：生成JSON响应
$response = array(
    'success' => true,'message' => '表单提交成功','record_id' => $newRecord->id
);
header('Content-Type: application/json');
echo json_encode($response);

在上面的PHP代码中，我们首先创建了一个包含成功标志、消息和新记录ID的数组。我们将响应头设置为JSON，最后将响应数组编码为JSON格式字符串并输出。

通过使用AJAX提交表单并接收JSON响应，我们可以创建更快、更用户友好的应用程序，同时减轻服务器的负担。