AngularJS:表单提交没有返回JSON中的值

AngularJS: Form submission not returning the values in JSON

本文关键字：JSON 返回 表单提交 AngularJS      更新时间：2024-06-26

我在其他页面上使用这种方式，表单运行良好。但是使用下面的HTML和AngularJS代码，表单会针对JSON中的每个键返回空值。

表单提交时返回JSON：

{
    "name":"",
    "description":"",
    "daystart":"",
    "dayend":"",
    "sendbusytone":"",
    "divertto":"",
    "extension":"",
    "password":"",
    "registrar":"",
    "secregistrar":"",
    "port":"",
    "realem":"",
    "maxcalls":"",
    "busytone":"",
    "diverttofor":"",
    "divertbusytune":"",
    "diverttoqns":""
}

HTML:

<div class="content">
    <form method="post" id="queue_form" name="queue_form1" ng-submit="addqueue()">
        <div class="scrollable">
            <div class="section1">
                <div class="content_left">
                    <div id="content_left_header">
                        <div class="header_left_side">
                            <img src="Images/queue_info.png" />
                            <span class="header_text_info">Queue Information</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>
                    <div id="content_name" class="w-330 m-t22">
                        <label class="input_text">Name</label>
                        <input type="text" name="name" ng-model="name" placeholder="name" class="w_140 text-field" required />
                    </div>
                    <div id="content_select" class="w-330">
                        <label class="input_text">Site</label>
                        <select class="select_width">
                            <option name="Type1">Type 1</option>
                            <option name="Type2">Type 2</option>
                            <option name="Type3">Type 3</option>
                        </select>
                    </div>
                    <div id="content_textarea" class="w-330">
                        <label class="input_text">Description</label>
                        <textarea class="textarea_h_w" name="description" ng-model="description" required></textarea>
                    </div>
                </div>
                <div class="qns">
                    <div id="content_right_header">
                        <div class="header_left_side">
                            <img src="Images/queuenservice.png" />
                            <span class="header_text_ser">Queue Night Service</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="content_extension w-330 m-t22">
                        <label class="input_text">Day Start</label>
                        <input type="text" name="daystart" ng-model="daystart" class="w_140 text-field" required />
                    </div>
                    <div class="content_extension w-330">
                        <label class="input_text">Day End</label>
                        <input type="text" name="dayend" ng-model="dayend" class="w_140 text-field" required />
                    </div>
                    <div class="max-calls">
                        <label class="maxcall-lbl">Divert Settings</label>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="sendbusytone" ng-model="sendbusytone" />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">
                            <input type="radio" class="radio-option m-l20" />
                            <span class="radio_txt">Divert to</span>
                            <input type="text" name="text" class="divert-text" ng-model="diverttoqns" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="section2">
                <div class="content_right">
                    <div id="Div1">
                        <div class="header_left_side">
                            <img src="Images/profile.png" />
                            <span class="header_text_agent">Profile</span>
                        </div>
                        <div class="header_right_side">
                            <img src="Images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="content_right_left">
                        <div class="content_extension w-330 m-t22">
                            <label class="input_text">Extension</label>
                            <input class="w_140 text-field" type="text" name="extension" ng-model="extension" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Password</label>
                            <input class="w_140 text-field" type="password" name="password" ng-model="password" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Registrar</label>
                            <input class="w_140 text-field" type="text" name="registrar" ng-model="registrar" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Sec.Registrar</label>
                            <input class="w_140 text-field" type="text" name="secregistrar" ng-model="secregistrar" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Transport Meidum</label>
                            <select class="option_width">
                                <option name="UDP">UDP</option>
                                <option name="EDP">EDP</option>
                                <option name="CSS">CSS</option>
                            </select>
                        </div>

                        <div class="content_extension w-330">
                            <label class="input_text">Port</label>
                            <input type="text" name="port" class="w_140 text-field" ng-model="port" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">proxy</label>
                            <input type="text" name="proxy" class="w_140 text-field" ng-model="proxy" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Category</label>
                            <select class="select_width">
                                <option name="Internal" value="1">Internal</option>
                                <option name="External" value="2">External</option>
                            </select>
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Realm</label>
                            <input type="text" name="realem" class="w_140 text-field" ng-model="realem" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="section3">
                <div class="content_thersholds">
                    <div id="Div2">
                        <div class="header_left_side">
                            <img src="Images/queue_threshold.png" />
                            <span class="header_text_ext">Thersholds</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="max-calls m-t22">
                        <label class="maxcall-lbl">Maximum Calls - Divert Settings</label>
                        <div class="content_extension w-330">
                            <label class="max_calls">Maximum Calls</label>
                            <input type="text" name="maxcalls" class="w_140 text-field" ng-model="maxcalls" required />
                        </div>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="busytone" ng-model="busytone" required />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">
                            <span class="radio_txt">Divert to</span>
                            <input type="text" class="divert-text" name="diverttofor" ng-model="diverttofor" required />
                        </div>
                    </div>
                    <div class="max-calls">
                        <label class="maxcall-lbl">NO Operators-Divert Settings</label>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="divertbusytune" ng-model="divertbusytune" />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">
                            <input type="radio" class="radio-option m-l20" />
                            <span class="radio_txt">Divert to</span>
                            <input type="text" name="text" class="divert-text" name="diverttoqns" ng-model="diverttoqns" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="action-btns">
                <input type="submit" value="Update" class="btnStyle" />
                <input type="button" value="Cancel" class="btnStyle" />
            </div>
        </div>
    </form>
</div>

AngularJS代码：

$scope.addqueue = function () {
    AddQueue.save({ 'name': $sanitize($scope.name),
        'description': $sanitize($scope.description),
        'daystart': $sanitize($scope.daystart),
        'dayend': $sanitize($scope.dayend),
        'sendbusytone': $sanitize($scope.sendbusytone),
        'divertto': $sanitize($scope.divertto),
        'extension': $sanitize($scope.extension),
        'password': $sanitize($scope.password),
        'registrar': $sanitize($scope.registrar),
        'secregistrar': $sanitize($scope.secregistrar),
        'port': $sanitize($scope.port),
        'realem': $sanitize($scope.realem),
        'maxcalls': $sanitize($scope.maxcalls),
        'busytone': $sanitize($scope.busytone),
        'diverttofor': $sanitize($scope.diverttofor),
        'divertbusytune': $sanitize($scope.divertbusytune),
        'diverttoqns': $sanitize($scope.diverttoqns)
    },
    function (response) {
        alert($scope.name);
        console.log($scope.name);
        console.log(AddQueue);
        var path = '/layout';
        console.log(angular.fromJson(response));
        $scope.result_addqueue = response;
        if ($scope.result_addqueue.status == true) {

        } else {
            $scope.msg = $scope.result_addqueue.message;
        }
        $location.path(path);
        $scope.loadMenu();
        $scope.loadQueues();
    });
};

我会创建一个名为queue或queueItem的模型，并在该模型上添加属性，而不是直接在作用域上添加。已经有很多关于"点"及其在范围中的使用的帖子。所以，首先，把所有的东西都放在一个你不会直接改变的对象上。

HTML 中的示例

<input type="text" class="divert-text" name="diverttofor" ng-model="queueItem.diverttofor" required />

你的储蓄也会容易得多：

$scope.addqueue = function () {
  AddQueue.save($scope.queueItem, function (response) {
    console.log(response); // If you use Chrome, you don't need to stringify this.
  });
};

顺便说一句，考虑（如果你是作者）将AddQueue.save改为使用promise，这样你就可以将结果/响应链接起来。

您可以做的另一件事是将代码更改为更加模块化。您可以让$scope.addqueue传递对对象的引用，而不是直接处理$scope.queueItem。我看到你的页面实际上正在提交，这可能是你问题的原因，提交会清除页面。

您可以将提交更改为以下内容（不要使用type="submit"）：

<input type="button" value="Update" class="btnStyle" ng-click="addqueue(queueItem)" />

并将您的添加队列更改为：

$scope.addqueue = function (queueItem) {
  AddQueue.save(queueItem, ...
相关文章：