0

我在 stackoverflow 上看到了数百个这样的问题，但没有一个真正详细解释它是如何一步一步完成的。我仍在学习 JS，但我找不到任何显示逐步教程样式的内容。有几十个，超过 70 个问题询问如何实现这一点，并且大多数没有选择最佳答案。所以这是一个通用形式 - 使用 PHP $_POST，我很想得到一些帮助。我想让这个表单刷新两个 div。这是我的代码；

<!-- This <form> for ENTERING measurements and SELECTING picture -->
<form name="log_data" method="post" action="" enctype="multipart/form-data" />
<input type="hidden" name="user_id" value="<?php echo $current_user->ID; ?>"/>
<input type="number" step="any" class="form-control" placeholder="Enter Length" name="length" value="" required="required"/>
<br />
<input type="number" step="any" class="form-control" placeholder="Enter Ground" name="ground" value="" required="required"/>
<br />
<label for="date">Week Of:</label>
<input type="date" name="date" class="form-control" value="" required="required"/>
<br />
<input type="file" name="file" class="form-control" value="" />
<br />
<input type="submit" name="submit" value="submit" class="btn btn-primary"/>
</form>


<?php
$post_id = NULL;
if(!empty($_FILES['file']['name'])) { //new code to fix string error
foreach ($_FILES as $file => $array) 
{
$newupload = insert_attachment($file,$post_id); 
}
} else { $newupload = '';} //new code to fix string error
if (isset($_POST['submit'])) 
{ 
$wpdb->insert(wp_jo_plugin_options, array (
'user_id' => $_POST['user_id'],
'length'  => $_POST['length'],
'ground'  => $_POST['ground'],
'date'    => $_POST['date'],
'file' => $newupload
) );
}
?>

表单需要更新两个 div。一个命名为 results_chart，一个命名为 data_table。我们的想法是在不刷新页面的情况下执行此操作。我目前使用 wordpress，这是一个插件。此外，我使用 ISSET 发布，没有单独的文件。这可能需要根据我阅读的有关实现此功能的内容进行更改。

$newupload 控制将图片后 ID 插入到单独的表中。我知道缺乏验证，我不确定如何实现它，所以我采用了 JS 验证方法。

4

2 回答 2

2

NetTuts+ 也有一个很好的教程：

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

于 2013-09-17T16:08:40.490 回答
0 
$.ajax({
    async: false,
    type: 'post',
    dataType: 'json',
    url: '/locationOfYourPHPFunction',
    data: $('#form').serializeArray(),
    success: function(__data) {
        $('#firstDiv').html(__data.firstThing);
        $('#secondDiv').html(__data.secondThing);
    };
});

您必须拥有将发布数据提供给 AJAX 调用的函数，return json_encode($data);以便正确输出格式。这假设您有一个带有键 firstThing 和 secondThing 的关联数组。（例如array('first' => '', 'second' => '');）。

async告诉 AJAX 函数不要同时运行这些，具体取决于您正在运行的内容，这可能会使事情无法正常工作。

.serializeArray()查找包含 id 的表单form并发送该数据。通过以 JSON 格式推送数据，可以将数据附加到该数组：({country: 'DE', time: '12:00'});

所有这些都可以放在一个 js 函数中调用 onclick="" 或通过 jQuery().click();。

如果您使用的是像 CakePHP 这样的框架，请确保将其放在$this->autoRender = false;函数的开头，否则您会遇到问题。

编辑：我错过了使用 wordpress 部分，一切仍然相关，但我强烈建议停止使用 wordpress。它非常不安全，结构不良，臃肿且对 SEO 和人们的理智不友好。

于 2013-09-17T16:26:01.180 回答