个人中心
gpt4 book ai didi

javascript - 使用 javascript、json 和 jquery 获取和设置客户端表单值

转载 作者：行者123 更新时间：2023-11-28 10:34:33 25 4
gpt4 key购买 nike

我正在使用 asp.net 中的 webforms 构建一个支持 ajax 的 UI。我真的希望这种互动非常轻松。我想做的是调用以获取数据，然后将其绑定(bind)到我的表单客户端。

这是我的工作示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script> 
    <style type="text/css">
        body { font-family: Arial; font-size:10px; }
        #formRow label { display:block;}
        #formRow input { display:block; margin-bottom: 10px;}
    </style>
    <script type="text/javascript">
        (function ($) {
            $.formUtil = {
                bind: function (row, entity) {
                    for (property in entity) {
                        //take the property name and put it together with the entity and eval it
                        var propertyValue = entity[property];
                        //take the property name and use it to build a selector to go find the input value in the form
                        //need a switch to be able to determine different element types
                        $(row).find('#' + property).val(propertyValue);
                    }
                },
                reverseBind: function (row, entity) {
                    for (property in entity) {
                        //Get the value from the target form element
                        entity[property] = $(row).find('#' + property).val();
                        alert(entity[property]);
                    }
                }
            };
        })(jQuery);

        //Create an object to fill the form in with
        //This will not be needed once there is a web service call to get the object
        function detailItem() {
            this.name = "Widget 123";
            this.description = "Some wonderful description";
            this.category = "2";
        }

        //Define the detail object on a global scale so that later it can be used to set the values into in reverse bind
        var detail = null;

        $(document).ready(function () {

            detail = new detailItem();

            $.formUtil.bind('#formRow', detail); //Initial bind for page load
        });

    </script>
</head>
<body>
    <div id="formRow">
        <label>Name:</label>
        <input type="text" id="name" /><!--Notice the id is he same as the field name in the object-->
        <label>Description:</label>
        <input type="text" id="description" /><!--Notice the id is he same as the field name in the object-->
        <label>Category:</label>
        <select id="category">
            <option value="1">Apples</option>
            <option value="2">Oranges</option>
            <option value="3">Banannas</option>
        </select>
        <input type="button" onclick="$.formUtil.reverseBind($(this).parents('div').get(0), detail)" value="Get Data From Form" />
    </div>
</body>
</html>

我的问题是:是否有更好的方法来做到这一点？因为 JSon 对象的属性都是变体类型，所以我应该如何最好地传达我正在使用的类型，以便如果我将数据绑定(bind)到选择，我可以评估正确的 jquery？

您对这段代码的总体感受如何？好的？坏的？

编辑:我用实体[属性]替换了 eval

编辑:使用的命名空间建议

编辑:更改选择器，以便它可以与任何表单元素一起使用

最佳答案

如果是我，我会给你的函数命名空间，而不是让它们自由 float :

(function($){
  $.myNamespace = {
      bind = function(row, entity){},
      reverseBind = function(row, entity){}
  };
})(jQuery);

$(document).ready(function () {

        detail = new detailItem();
        /* note i pass in a selector instead of the jQ node list - IMO using jQ on the selector 
           should be done and verified within the functions not as part of the argument. */
        $.myNamespace.bind('#formRow', detail); 
    });

关于javascript - 使用 javascript、json 和 jquery 获取和设置客户端表单值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1931557/

25 4 0
文章推荐： 从 URL 到 UITextlabel 的 Swift4 常量
文章推荐： css - 如何给最后一个类(class)的名字，一些其他的CSS
文章推荐： json - reduce 函数正在打印一个空字典 [ :]
文章推荐： html - 下拉对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com