代码之家  ›  专栏  ›  技术社区  ›  Brayden salmanwahed

格式化表窗体中的序列化数据并选择数据

ajax html php javascript
  •  0
  • Brayden salmanwahed  · 技术社区  · 6 年前

    我试图从一个网页发送ajax post数据,其中的数据是从一个表格、日期选择框和注释文本框组成的表单中获取的。 但是,网站的这个特定部分不是静态的,因此这个网页是在GET请求的一个php文件中构建的,并以base64格式返回,以便解码并添加到网站中。

    “主页面”上的ajax是: 

    $.ajax({
  type: "GET",
  url: 'backend/ajax/webpage.php',
  dataType: 'text',
  data: {
    message: 'UPDATE_WEBPAGE'
  },
  success: function(result) {
    $('#main-content').html(window.atob(result));
  },
  error: function(error) {}
});

    这将返回一个很长的表,虽然我已将其最小化如下。 

        <div class="section__content section__content--p30">
    <div class="container-fluid" id="content">
        <div class="col-md-12">
            <div class="overview-wrap">
                <h2 class="title-1">Rosters</h2>
            </div>
            </br>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card" style="border-radius: 10px;">
                    <div class="card-header">
                        <strong class="card-title">Roster for week starting:<span class="input-group date" style="width: 20%;" id="date" data-target-input="nearest">
                        <input id="date-input" type="text" placeholder="Week starting" class="form-control datetimepicker-input" data-target="#date"/>
                            <span class="input-group-append" data-target="#date" data-toggle="datetimepicker">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            	</span>
                        	</span>
                        </strong>
                        <script>
                            $(function() {
                                $("#date").datetimepicker({
                                    format: 'D/M/YYYY',
                                    daysOfWeekDisabled: [0, 6]
                                });
                            });
                        </script>
                    </div>
                    <div class="card-body">
                        <form id="roster-form" action="">
                            <div class="form-group table-responsive table--no-card m-b-30">
                                <table id="roster" for="roster-form" class="table table-borderless table-earning" align="left">
                                    <thead align="left">
                                        <tr>
                                            <th>Name</th>
                                            <th>Monday</th>
                                            <th>Tuesday</th>
                                            <th>Wednesday</th>
                                            <th>Thursday</th>
                                            <th>Friday</th>
                                            <th>Saturday</th>
                                            <th>Sunday</th>
                                        </tr>
                                    </thead>
                                    <tbody align="left">
                                        <th id="$days[$day]" name="$days[$day]">
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;">
                                                <select value="$name" name="$namestart" class="js-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="background-color: transparent;max-width:5%;">
                                                    <option selected="selected" value="$pstime">$pstime</option>
                                                    ";
                                                    <option value="05:00 am">05:00 am</option>
                                                    <option value="05:30 am">05:30 am</option>
                                                    <option value="05:45 am">05:45 am</option>
                                                    <option value="06:00 am">06:00 am</option>
                                                    <option value="06:15 am">06:15 am</option>
                                                    <option value="06:30 am">06:30 am</option>
                                                    <option value="06:45 am">06:45 am</option>
                                                    <option value="07:00 am">07:00 am</option>
                                                    <option value="07:15 am">07:15 am</option>
                                                    <option value="07:30 am">07:30 am</option>
                                                    <option value="07:45 am">07:45 am</option>
                                                    <option value="08:00 am">08:00 am</option>
                                                    <option value="08:15 am">08:15 am</option>
                                                    <option value="08:30 am">08:30 am</option>
                                                    <option value="08:45 am">08:45 am</option>
                                                    <option value="09:00 am">09:00 am</option>
                                                    <option value="09:15 am">09:15 am</option>
                                                    <option value="09:30 am">09:30 am</option>
                                                    <option value="09:45 am">09:45 am</option>
                                                    <option value="10:00 am">10:00 am</option>
                                                    <option value="10:15 am">10:15 am</option>
                                                    <option value="10:30 am">10:30 am</option>
                                                    <option value="10:45 am">10:45 am</option>
                                                    <option value="11:00 am">11:00 am</option>
                                                    <option value="11:15 am">11:15 am</option>
                                                    <option value="11:30 am">11:30 am</option>
                                                    <option value="11:45 am">11:45 am</option>
                                                    <option value="12:00 pm">12:00 pm</option>
                                                    <option value="12:15 pm">12:15 pm</option>
                                                    <option value="12:30 pm">12:30 pm</option>
                                                    <option value="12:45 pm">12:45 pm</option>
                                                    <option value="1:00 pm">1:00 pm</option>
                                                    <option value="1:15 pm">1:15 pm</option>
                                                    <option value="1:30 pm">1:30 pm</option>
                                                    <option value="1:45 pm">1:45 pm</option>
                                                    <option value="2:00 pm">2:00 pm</option>
                                                    <option value="2:15 pm">2:15 pm</option>
                                                    <option value="2:30 pm">2:30 pm</option>
                                                    <option value="2:45 pm">2:45 pm</option>
                                                    <option value="3:00 pm">3:00 pm</option>
                                                    <option value="3:15 pm">3:15 pm</option>
                                                    <option value="3:30 pm">3:30 pm</option>
                                                    <option value="3:45 pm">3:45 pm</option>
                                                    <option value="4:00 pm">4:00 pm</option>
                                                    <option value="Close">Close</option>
                                                </select>
                                            </div>
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;>
                                            <select value=" $name " name="$namefinish " class="js-select2 select2-hidden-accessible " style="background-color: transparent;max-width:5%; ">
                                                <option value="$pftime ">$pftime</option>
                                                "; <option value="05:00 am">05:00 am</option>
                                                <option value="05:30 am">05:30 am</option>
                                                <option value="05:45 am">05:45 am</option>
                                                <option value="06:00 am">06:00 am</option>
                                                <option value="06:15 am">06:15 am</option>
                                                <option value="06:30 am">06:30 am</option>
                                                <option value="06:45 am">06:45 am</option>
                                                <option value="07:00 am">07:00 am</option>
                                                <option value="07:15 am">07:15 am</option>
                                                <option value="07:30 am">07:30 am</option>
                                                <option value="07:45 am">07:45 am</option>
                                                <option value="08:00 am">08:00 am</option>
                                                <option value="08:15 am">08:15 am</option>
                                                <option value="08:30 am">08:30 am</option>
                                                <option value="08:45 am">08:45 am</option>
                                                <option value="09:00 am">09:00 am</option>
                                                <option value="09:15 am">09:15 am</option>
                                                <option value="09:30 am">09:30 am</option>
                                                <option value="09:45 am">09:45 am</option>
                                                <option value="10:00 am">10:00 am</option>
                                                <option value="10:15 am">10:15 am</option>
                                                <option value="10:30 am">10:30 am</option>
                                                <option value="10:45 am">10:45 am</option>
                                                <option value="11:00 am">11:00 am</option>
                                                <option value="11:15 am">11:15 am</option>
                                                <option value="11:30 am">11:30 am</option>
                                                <option value="11:45 am">11:45 am</option>
                                                <option value="12:00 pm">12:00 pm</option>
                                                <option value="12:15 pm">12:15 pm</option>
                                                <option value="12:30 pm">12:30 pm</option>
                                                <option value="12:45 pm">12:45 pm</option>
                                                <option value="1:00 pm">1:00 pm</option>
                                                <option value="1:15 pm">1:15 pm</option>
                                                <option value="1:30 pm">1:30 pm</option>
                                                <option value="1:45 pm">1:45 pm</option>
                                                <option value="2:00 pm">2:00 pm</option>
                                                <option value="2:15 pm">2:15 pm</option>
                                                <option value="2:30 pm">2:30 pm</option>
                                                <option value="2:45 pm">2:45 pm</option>
                                                <option value="3:00 pm">3:00 pm</option>
                                                <option value="3:15 pm">3:15 pm</option>
                                                <option value="3:30 pm">3:30 pm</option>
                                                <option value="3:45 pm">3:45 pm</option>
                                                <option value="4:00 pm">4:00 pm</option>
                                                <option value="Close">Close</option>
                                                </select>
                                                <span class="dropdown-wrapper" style="background-color: transparent;" aria-hidden="true"></span>
                                            </div>
                                        </th>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card" style="border-radius: 10px;">
                                        <div class="card-header">
                                            <strong class="card-title">
                                        		Comments
                                        	</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <textarea class="form-control" id="roster-comments" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" form="roster-form" class="btn btn-primary btn-lg btn-block">Submit Roster</button>
                                    <a href="#" id="download">Download Roster</a></br>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#roster-form").submit(function(e) {
            e.preventDefault();
            var roster = {};
            var data = JSON.stringify($("#roster-form").serializeArray());
            //I understand this is where i need to loop through the data and create the json object to send to rostersfunc.php although I'm lost.
            $.ajax({
                type: 'POST',
                url: 'backend/ajax/rostersfunc.php',
                dataType: 'json',
                data: {
                    message: "UPDATE_ROSTER",
                    data: data
                },
                success: function(result) {},
                error: function() {}
            });
        });
        $(document).ready(function() {
            $('.js-select2').select2({
                minimumResultsForSearch: -1
            });
        });
    });
</script>

    我相信我需要遍历表单数据的serializearray输出,或者遍历数据的serialize输出,并将day_name_start/finish截取为day、name、start/finish&value这4个部分,尽管我没有这么做。

    电流输出如下: 

    post data = [{
    "name": "monday_bob_start",
    "value": "x am/pm"
}, {
    "name": "monday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "tuesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "tuesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "wednesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "wednesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "thursday_bob_start",
    "value": "x am/pm"
}, {
    "name": "thursday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "friday_bob_start",
    "value": "x am/pm"
}, {
    "name": "friday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "saturday_bob_start",
    "value": "x am/pm"
}, {
    "name": "saturday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "sunday_bob_start",
    "value": "x am/pm"
}, {
    "name": "sunday_bob_finish",
    "value": "y am/pm"
}]

    我正努力做到这一点: 

    roster = {
	"monday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"tuesday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"wednesday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"thursday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"friday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"saturday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"sunday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	}
}
    1 回复  |  直到 6 年前
        1
  •  1
  •   IVO GELOV    6 年前
    • 在中的元素上迭代 postData
    • 分开 name 价值依据 _ 获取包含所需json内路径的数组
    • 在中创建此路径 roster
    • 分配 value 到给定的路径 名册 

        var roster = {};
    var postData = $("#roster-form").serializeArray();
    var len = postData.length, i, elem;
    for(i=0; i<len; i++)
    {
      var path = postData[i].name.split("_");
      elem = roster;
      while(path.length)
      {
        key = path.shift();
        if(path.length)
        {
          if(typeof elem[key] === "undefined") elem[key] = {};
          elem = elem[key];    
        }
      }
      elem[key] = postData[i].value;
    }
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    Jason Owens  ·  我的html/javascript播放按钮无法播放嵌入的youtube视频
    1 年前
    SlickRed  ·  我无法使用JS关注HTML元素
    1 年前
    Mayron Guedes  ·  如果登录名不在本地存储中,如何重定向页面?
    1 年前
    assembler  ·  Nextjs没有处理发布请求
    1 年前
    PavelB  ·  如何使用Seleniumwebdriver和mocha只运行一个测试文件?
    1 年前
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Toniq  ·  javascript为php保存多维数组
    1 年前
    Natalie Smyth  ·  隐藏类只在我试图切换的两个部分中的一个部分上工作
    1 年前
    SkyWalker  ·  在JavaScript中,合并日期-时间序列的有效算法是什么?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号