Question

我有一个具有一对多关系的数据库结构。在html表单中，有类似的输入，名称为＆＃39; item []＆＃39;或者＆＃39;文件[]＆＃39;使数据成为一个数组

<form action="submit.php" method="get">
  Name:<input type="text" name="name"/><br/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Select:<select name="select" value="1" original="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  </select>

</form>

我如何只提交更改的字段，而在服务器端，我可以识别哪个项目已更改？我尝试禁用输入，但似乎无法正常工作。

另一个问题是，如果我使用ajax提交表单，我该如何提交文件

Answer 1

您可以使用jQuery解决此问题，并在每个更改的input上添加一个类您可以在没有课程的情况下禁用所有inputs并提交表单

＆＃13;

$(document).ready(function() {
  $('input, select, textarea').on('change', function() {
    $(this).addClass('changed');
  });
  
  $('form').on('submit', function() {
    $('input:not(.changed), textarea:not(.changed)').prop('disabled', true);
    
    // alert and return just for showing
    alert($(this).serialize().replace('%5B', '[').replace('%5D', ']'));
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="submit.php" method="get">
  Name:<input type="text" name="name" /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Select:<select name="select" value="1" original="1">
  <option value="" selected="selected" disabled="disabled"></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  </select><br/><br/>
  <button type="submit">send</button>
</form>

＆＃13;

您可以在name属性中使用索引，例如<input type="text" name="item[1]" />

Answer 2

您可以在更改时将“已更改”类添加到所需元素，并发送没有“已更改”类的元素的数据：

<form action="submit.php" method="get" id="myform">
  Name:<input type="text" name="name"/><br/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Select:<select name="select" value="1" original="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  </select>
<input type="submit" id="submit">
</form>

倾听变化：

$("input,select").on("change",function(){
   $(this).addClass("changed");
})

通过ajax调用处理数据并通过返回false来阻止表单提交，并将更改的类重置为空：

$("#myform").on("submit",function(){

//Collecting data from changed class:
var data;
$(".changed").each(function(){
data=data+$(this).attr("name")+":"+$(this).val()+",";
});

//just removing last comma:
data=data.substring(0, data.length - 1);

//Submit data:
$.ajax({
    ...
    data : { data },
    ...
    success: function(){ 
    //Removing changed class from all elements
    $(".changed").removeClass("changed");
    }
});

return false;
});

Answer 3

var data = {};
$(function(){
    $(document).on('change', 'input', function(){
    data[this.name] = this.value;
  });
});

您可以向输入添加更改事件，并将更改的值添加到数据对象或附加字段以形成数据。所以数据对象只包含更改的值。

您可以使用formdata发送文件数据。请参阅此链接。

How to use FormData for ajax file upload

JQuery如何在表单有一些数据数组时只提交更改的字段

3 个答案: