使用Jquery，Ajax和JSON选中相应的复选框后，在数据库中插入数据

Question

我的表单很少，有几个复选框和一个隐藏的div，当用户选中相应的框时会打开该隐藏的div。 我想使用ajax和json在检查特定日期时在数据库中插入数据，并在从隐藏div插入的数据库中插入时间。 可能吗？ 这是我的表格： 在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();

   };

});

Answer 1

我更改了您的小提琴中的一些内容，以正确传递'day'+向发布数据中添加'from'和'to'值。 另外，目前一次只能选择一天，因为我猜这是您的逻辑所必需的。

更新小提琴 。

$(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();

   };

});

Answer 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
    }