Question

我在SO上看过很多关于这个话题的帖子，虽然应用解决方案并不适合我，我现在很困惑。我错过了吗？

请考虑我是.js的菜鸟。

因此，我使用此JS从动态创建的表单元素中获取我的值，并尝试发布它：

编辑12:21：我得到了这个脚本，它应该将每个元素从表单解析成类似于json的自定义数组。我仍然得到空引用。知道怎么做吗？

 var getValues = function (myForm) {
        var array = [];
    var parser;

    $("formElement").each( function (i, elem) {

            parser.empty()
            parser = {
                Id: $(elem,"#Id ").val(),
                someOption: $(elem, "#someOption ").val(),
                someText: $(elem, "#someText ").val(),
                someNumber: $(elem, "#someNumber  ").val()
            }
            array.push(parser);

        });

    console.log(array);


    $.ajax({
        type: "POST",
        url: 'angus',
        traditional: true,
        data:  {json: array },
        success: function (data) {
            $("#getData").empty();
            $("#getData").append(array);
        }
    });            
    };

我在日志中得到这个：（像i，i + 1，i + 2，i + 3这样的索引对象与视图模型匹配 - 是不是？我对这些原型和函数有着复杂的感觉 - 它是什么？）

在我的控制器操作中，我得到null异常：

 [HttpPost]
        public ActionResult angus(IEnumerable<TrashViewModel> json)
        {

            return View(json.ToList());
        }

我创建了我的viewmodel：

  [Serializable]
public class TrashViewModel
{
    public int Id { get; set; }
    public string someOption { get; set; }
    public string someText { get; set; }
    public string someNumber { get; set; }

}

我的表单HTML属性名称与viemodel类的名称相匹配。

编辑： html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="formExample" ng-controller="ExampleController">

    <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

    <form novalidate class="simple-form">
        <div class="here">
            <div class="formElement row">

                  <input type="hidden" name="Id" value="1"/>
                <div class="col-md-2">
                    <select name="someOption" class="optns form-group col-md-12" ng-model="user.class">
                        <option selected value="1"> Rodzaj... </option>
                        <option value="test">2</option>
                        <option value="2">test</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        @*tutaj beda dodane opcje*@
                    </select>
                </div>
                <div class="col-md-1">
                    <input name="someNumber" class="form-group col-md-12" type="number" ng-model="user.number" value="" text="Ilość..." /><br />
                </div>
                <div class="col-md-9">
                    <input name="someText" class="form-group col-md-12" type="text" ng-model="user.text" value="" text="Uwagi..." /><br />
                </div>
            </div>
        </div>
        <input type="button" value="Reset" />
        <input type="submit" value="Save" />
    </form>
</div>

附加html：

 var strVar = "";
            strVar += "<div class=\"formElement row\">";
            strVar += "                  <input type=\"hidden\" name=\"Id\" value=\" "+ $scope.counter +"\"\/>";
            strVar += "                <div class=\"col-md-2\">";
            strVar += "                    <select name=\"someOption\" class=\"optns form-group col-md-12\" ng-model=\"user.class\">";
            strVar += "                        <option selected value=\"1\"> Rodzaj... <\/option>";
            strVar += "                        <option value=\"test\">2<\/option>";
            strVar += "                        <option value=\"2\">test<\/option>";
            strVar += "                        <option value=\"2\">2<\/option>";
            strVar += "                        <option value=\"3\">3<\/option>";
            strVar += "                        @*tutaj beda dodane opcje*@";
            strVar += "                    <\/select>";
            strVar += "                <\/div>";
            strVar += "                <div class=\"col-md-1\">";
            strVar += "                    <input name=\"someNumber\" class=\"form-group col-md-12\" type=\"number\" ng-model=\"user.number\" value=\"\" text=\"Ilość...\" \/><br \/>";
            strVar += "                <\/div>";
            strVar += "                <div class=\"col-md-9\">";
            strVar += "                    <input name=\"someText\" class=\"form-group col-md-12\" type=\"text\" ng-model=\"user.text\" value=\"\" text=\"Uwagi...\" \/><br \/>";
            strVar += "                <\/div>";
            strVar += "            <\/div>";

我最终得到null异常，其他帖子建议是因为viemodel类与序列化对象不匹配。此时不知道该怎么做。

谢谢！

Answer 1

尝试替换

 var parsed = $(myForm).serializeArray();

带

 var parameters = {
            Id : $("#Id ").val(),
            someOption : $("#someOption ").val(),
            someText : $("#someText ").val(),
             someNumber  : $("#someNumber  ").val()
       };

然后将其传递给提交

JSON.stringify(parameters)

Answer 2

在您的JavaScript代码中，有3件事情向我发出：

你正在使用.serializeArray（），它创建了一个对象数组，每个对象都有一个name和value属性。这与TrashViewModel对象的结构不匹配
您使用名为＆＃34; json＆＃34;的单个属性将序列化对象包装到新对象中，这会为您的数据添加更多结构
你正在对所述对象进行字符串化

所有这些都是不必要的，因为.ajax（）方法会以正确的格式为您打包数据。您只需要将序列化表单作为数据参数传递。

@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.NONE)
public class MyJavaFXApplicationUITest extends TestFXBase {

    @MockBean
    private TemperatureService temperatureService;

    @Autowired
    private ConfigurableApplicationContext context;

    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("main.fxml"));
        loader.setControllerFactory(context::getBean);
        Parent rootNode = loader.load();

        stage.setScene(new Scene(rootNode, 800, 600));
        stage.centerOnScreen();
        stage.show();
    }

    @Test
    public void testTemperatureReading() throws InterruptedException {
        when(temperatureService.getCurrentTemperature()).thenReturn(new Temperature(25.0));
        WaitForAsyncUtils.waitForFxEvents();

        assertThat(find("#temperatureText", Text.class).getText()).isEqualTo("25.00 C");
    }
}

，您应该将操作上的参数设置为TrashViewModel对象。请注意，它只是一个对象，而不是一个可枚举的对象。

data: $(myform).serialize()

如果你要使用.serializeArray（），那么你需要创建一个具有Name和Value属性的模型对象，以便模型绑定器可以正确地解析params。

public ActionResult Angus(TrashViewModel form)
{
    // do something
}

Answer 3

要发布数组，您需要对数据进行字符串化并设置contentType选项。你需要ajax代码

$.ajax({
    type: 'POST',
    url: '@Url.Action("angus")', // do not hard code url's
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ model: array }), 
    success: function (data) {

和控制器

[HttpPost]
public ActionResult angus(IEnumerable<TrashViewModel> model)

Answer 4

我对结果并不是百分之百满意，因为我仍然需要在服务器端解析json字符串。我想我很快就会做Q＆amp; A，所以其他人不会像这样做一周打一场。感谢：

@StephenMuecke
@Emil
@Jeff M

实际上我做了什么：

获取输入并推送自定义样式然后发布ajax请求：

[ServiceConfiguration(typeof(IContentTypeAdvisor))]
        public class ContentTypeAdvisor : IContentTypeAdvisor
        {
            public IEnumerable<int> GetSuggestions(IContent parent, bool contentFolder, IEnumerable<string> requestedTypes)
            {
                // Suggest relevant content types
            }
        }

控制器：（不要介意逻辑，因为除了在调试过程中提供信息外，它在这里没用）

最重要的是将字符串类型作为参数;我100％确定我的json从复杂类型的viewmodel中跳出来

        var array = [];
        var parser;

        $(".formElement").each( function (i, elem) {

                //parser.empty()
                parser = {
                    Id: $("#Id", $(this)).val(),
                    someOption: $("#someOption", $(this)).val(),
                    someText: $("#someText", $(this)).val(),
                    someNumber: $("#someNumber", $(this)).val()
                };
                console.log(parser);
                array.push(parser);

            });

        console.log(array);


        $.ajax({
            type: "POST",
            url: 'angus',
            traditional: true,
            data: { json: JSON.stringify(array) },
            success: function (data) {
                $("#getData").empty();
                $("#getData").append(array);
            }
        });

将json传递给MVC控制器

4 个答案: