如何获取引导模式的数据并发送 PHP

Question

我需要通过Ajax获取模态表单数据 我的代码：

$(document).on('click', '#save-photo', function () {
$.ajax({
url: '/sistem/view/agend/photovisit.php',
type: 'POST',
data: $('#photo').serialize(),
beforeSend: function () {
$('#save-photo').val("Saving");
},
success: function (data) {
$('#photo')[0].reset();
$('#registerPhoto').modal('hide');
//$('#call sucess message').html(data); 
}
});
});

代码模式：

<div id="registerPhoto" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerPhotoLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-xs-center" id="registerPhotoLabel">Register Photo Visit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"> <!-- FORM -->
<form name="photo" id="photo" data-async data-target="#rating-modal" method="POST" action="/sistem/view/agend/photovisit.php" enctype="multipart/form-data">
<input type="hidden" name="_token" value="">
<div class="row justify-content-md-left">
<div class="col col-lg-3">
<label class="control-label" for="datavisit">Data Visit</label>
</div>
<div class="col col-lg-6">    
<input type="date" name="datavisit" class="form-control  form-control-sm form-group small" />
</div>
</div>
<div class="row justify-content-md-left">
<div class="col col-lg-3">
<label class="control-label" for="idvisit">Visit</label>
</div>
<div class='col col-md-6'>    
<select>
<option value="1">Arquitect</option>
<option value="2">Engineer</option>
</select>
</div>
</div>
<br />
<div class="row justify-content-md-left">
<div class="col col-lg-3">
<label class="control-label" for="percent">Percent Progress</label>
</div>
<div class="col col-md-6 slidecontainer">
<input type="range" name="percent" id="range_weight" min="1" max="100" value="1" class="form-control-range slider" oninput="range_weight_disp.value = range_weight.value">
<output  id="range_weight_disp"></output>
</div>
</div>
<div class="row justify-content-md-left">
<div class="col col-lg-3">
<label class="control-label" for="photofile">Photo</label>
</div>
<div>   
<input type="file" class="form-control-file form-control-sm form-group small" name='photofile' id="photofile" multiple="multiple" />
<span id="hidden_img_show"></span>
</div>
</div>
<div class="row justify-content-md-left">
<div class="col col-lg-3">
<label class="control-label" class="control-label" for="photoDescription">Description Photo</label>
</div>
<div class='col-md-auto'>                
<textarea name="photoDescription" cols="25" rows="3" class="form-control  form-control-sm form-group small" ></textarea>
</div>
</div> 
<div class="modal-footer">
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button"  name="save-photo" id="save-photo" class="btn btn-primary">
<span class="fas fa-plus"></span>
Save</button> 
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- fim modal foto -->
</div>
</div>

我的目标是输入所有字段并发送到 PHP 页面 editacli.php该页面已经具有接收每个表单元素的 $ _POST ['']; 的方法，并在数据库中进行保存保存，然后我想关闭模态并在模态屏幕上显示一条消息，"数据保存成功"。

但是这个 Ajax 代码不起作用，当我单击提交按钮时没有任何反应。

注意：我已经在没有模态的情况下测试了我的 PHP 插入页面，并且它正在正常保存，我只是不知道如何使用 Modal 解决。

Answer 1

尝试将type: 'POST',更改为method: 'POST',并添加contentType: 'application/json

'

Answer 2

请阅读我的代码，它离你的很远，但我认为它会帮助你。

<script>
$(document).ready(function(){
$('#insert_open').on('submit',function(e)
{
e.preventDefault();
processing_show();  
var form_data = new FormData(this);                  
$.ajax
({
url: "./scripts.php?action=insert_open",
type: "POST",             
data: form_data,
contentType: false,       
cache: false,             
processData:false,
success: function(data) {
processing_hide();
$("#message-success").slideDown("slow");
setTimeout(function(){close_message_success();},3000);
},
error: function(data)
{
$("#message-warning").slideDown("slow");
setTimeout(function(){close_message_success();},3000);
}
});
});
});
</script>

对于表单，这是我的html

<form class="form-horizontal row-fluid" id="insert_open" name="insert_open" method="post" enctype="multipart/form-data" >
<div class="form-horizontal row-fluid">
<div class="control-group">
<label class="control-label" for="basicinput"></label>
<div class="controls">
<button class="btn btn-primary" type="submit">Insert all Open has the same id_list</button>
</div>
</div>
</div>
</form>

Answer 3

你的代码中有几个拼写错误。例如，此行：

data: $('#photo').serialize(),

引用窗体中的此(且仅此(元素：

<input 
type="file" 
class="form-control-file form-control-sm form-group small" 
name='photo' 
id="photo" 
multiple="multiple" />

因为这是 IDphoto的元素。因此，您的 AJAX 调用仅序列化该字段的信息。表单的 ID 是foto，因此如果要发送整个表单，则必须将该行代码更改为：

data: $('#foto').serialize(),

另外，这一行：

$('#savephoto').modal('hide');

不执行任何操作，因为表单中的任何位置都没有具有savephotoID 的元素。模态的 ID 实际上是registerphoto，这就是您需要使用的，以便关闭模态：

$('#registerphoto').modal('hide');

进行这些更改，然后重试。

Answer 4

1：更改表单提交方法，如下所示
2：如果您的 php 文件photovisit.php已从主文件夹链接，请使用
url: "../sistem/view/agend/photovisit.php",url: "sistem/view/agend/photovisit.php",。

$('#photo').submit(function(e){
e.preventDefault();
var savePhoto = $(this).serialize();
$.ajax({
url: "../sistem/view/agend/photovisit.php",
type: "post",
data: savePhoto ,
dataType: 'JSON',
success: function(response) {
}

检查一下，让我知道问题是否仍然存在。

Answer 5

你需要把 id 属性放到你想要被 POST 到 PHP 文件的元素上，并获取它的值。比如说，你需要获取照片描述文本区域的值。您将首先提供一个 id 属性而不是名称属性。所以它会是这样的：

<textarea id="photoDescription"></textarea> 

然后，您将文本区域的值存储到 JS 变量中。

var photoDescription = $('#photoDescription').val();

之后，将您需要的所有值放入您的照片访问中.php

data: photoDescription,  

此外，在您的 photovisit中.php它将从您的 ajax 接收值，您需要使用 $_POST 方法调用它。

$photoDescription = $_POST['photoDescription']; //

POST 变量的索引应该与 AJAX 调用 "data：" 的索引相同。