使用 Jquery、Ajax 和 JSON 选择相应复选框时在数据库中插入数据答案

【问题标题】：Insert data in database when corresponding check box is selected using Jquery, Ajax and JSON使用 Jquery、Ajax 和 JSON 选择相应复选框时在数据库中插入数据
【发布时间】：2013-02-05 10:28:23
【问题描述】：

我的表单很小，有几个复选框和一个隐藏的 div，当用户选中相应的框时会打开。我想在检查特定日期时使用 ajax 和 json 在数据库中插入数据，并在从隐藏 div 插入的数据库中插入时间。可能吗？这是我的表格： ON jsFiddle

<div>
<input type="checkbox" name="monday" id="mon" class="toggler"  /> Monday
<input type="checkbox" name="tuesday" id="tue" class="toggler"  />Tuesday
<input type="checkbox" name="wendsday" id="wen" class="toggler"/> Wendsday
<input type="checkbox" name="thursday" id="thu" class="toggler"  /> Thursday
<input type="checkbox" name="friday" id="fri" class="toggler" /> Friday
<input type="checkbox" name="saturday" id="sat" class="toggler" /> Saturday
<input type="checkbox" name="sunday" id="sun" class="toggler" /> Sunday
</div>
    <div id="name" class="hidden" style="display: none">
    Time From::<input type="text" id="place" placeholder=""></input> Time To::<input type="text" id="place_one" placeholder=""></input>
    <input type="button" onclick="save_time();" value="Save" />
    </div>

这是我的 javascript：

$(function(){
   $('.toggler').click(function(id){
       if (this.checked) {
           $('#name').slideDown();
       } else {
           $('#name').slideUp();
       }
   });

   save_time = function(days){
       $.ajax({
          type: "post",
          url: "",
          data: "days="+days,
          success: function(data){

          }
       });
       $('#name').slideUp();

   };

});

【问题讨论】：

标签： javascript ajax json checkbox

【解决方案1】：

我在您的小提琴中更改了一些内容以正确传递“day”+ 将“from”和“to”值添加到 post 数据中。此外，目前一次只能选择一天，因为我猜这是您的逻辑所要求的。

Updated Fiddle.

$(function(){
   $('.toggler').click(function(id){
       $('.toggler').not('#' + $(this).attr('id')).attr('checked', false);
       if (this.checked) {
           $('#name').slideDown();
       } else {
           $('#name').slideUp();
       }
   });

   save_time = function(){
       var id = $('.toggler:checked').attr('id');
       $.ajax({
          type: "post",
          url: "url",
           data: {day: id, from: $('#place').val(), to: $('#place_one').val()},
          success: function(data){

          }
       });
       $('#name').slideUp();

   };

});

【讨论】：

谢谢@Marcell Fülöp 这是我需要的想法。现在我只需要弄清楚如何在 php 中做到这一点。再次感谢:)
现在在服务器端使用 PHP 时，您会收到 $_POST['day']、$_POST['from'] 和 $_POST['to']。当然你可以在 JS 中更改 post 参数名称。您可以访问和验证这些 POST 变量，然后根据您的逻辑保存它们。

【解决方案2】：

你错过了ajax调用的contentType和dataType属性。

save_time = function(days){
           $.ajax({
              type: "post",
              url: "",
              data: "days="+days,
              contentType: "application/json",
              dataType: "json",
              success: function(data){

              }
           });

并且在你的服务器端方法中应该有这样的属性

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string MethodName(string days)
    {
        // your code
    }

【讨论】：

Content-Type 会自动设置为 application/x-www-form-urlencoded 用于 POST 请求（如果未指定）。 dataType 如果在响应中指定，也会被 jQuery 猜到。