Question

我正在使用jquery创建一个简单的CRUD应用程序，并通过JSON传递到FLASK后端。 JSON查询工作正常。我正在使用的HTML表单将“ new”和“ edit”加倍，因此，我更改了“ action”属性和“ method”以反映是创建新记录还是对现有记录进行编辑。

这是表格...

<div id="chardlg" class="easyui-dialog" title="Character" style="width:300px;padding:10px;" closed="true">
<form id="cf" enctype="multipart/form-data" name="cf">
    <table>
        <tr>
            <td>Name:</td>
            <td><input name="name" class="easyui-textbox"></td>
        </tr>
        <tr>
            <td>Short Name:</td>
            <td><input name="short_name" class="easyui-textbox"></td>
        </tr>
        <tr>
            <td>Description:</td>
            <td><input name="description" class="easyui-textbox"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit"></td>
        </tr>
    </table>
</form>

您会注意到我没有“方法”或“动作”。我已经将它们放在适当的位置尝试过，同样的结果。

这是我的JavaScript，用于处理表单。

<script type="text/javascript">
function newCharacter(){
    $('#chardlg').dialog('open').dialog('setTitle','New Character');
    $('#cf').attr('action', charactersurl);
    $('#cf').attr('method', 'POST');
    $('#cf').form('clear');
}
function editCharacter(){
    var row = $('#cg').datagrid('getSelected');
    if (row){
        $('#chardlg').dialog('open').dialog('setTitle','Edit Character');
        document.querySelector('#cf').action = basecharurl.concat(row.character_id);
        document.querySelector('#cf').setAttribute('method','PUT');
        //$('#cf').attr('action', basecharurl.concat(row.character_id));
        //$('#cf').attr('method', 'PUT');
        $('#cf').form('load', row);
    }
}

通过浏览器调试器，我可以看到每行的属性都按预期的方式进行了更改，但是在提交URL后，我可以在FLASK控制台上看到“ GET”方法，而不是正确的“ PUT”或“ POST”。该URL的其余部分是正确的，并且如果我使用“ PUT”或“ POST”对其进行测试，那么它将起作用。

您还将注意到，我已经注释掉设置属性的jquery方法，但这只是为了证明我已经尝试了这两种方法。两种方法都设置了正确的属性，但是查询仍然使用“ GET”方法发送。

编辑：根据要求，这里是调用函数的jquery datagrid ...

$('#cg').datagrid({
    singleSelect:'true',
    url:charactersurl,
    method:'get',
    emptyMsg:'No Data available',
    toolbar:[{
        iconCls: 'icon-add',
        handler: function(){newCharacter()}
        },'-',{
        iconCls: 'icon-edit',
        handler: function(){editCharacter()}
        },'-',{
        iconCls: 'icon-remove',
        handler: function(){alert('Remove')}
    }],
    columns:[[
        {field:'name',title:'Name',width:100},
        {field:'short_name',title:'Short Name',width:100},
        {field:'description',title:'Description',width:120}
    ]]
});

进一步搞砸... 如果我在HTML中设置表单方法，即...

<form id="cf" enctype="multipart/form-data" method='put' name="cf">

它仍将其作为“获取”请求发送。显式设置了“ get”的唯一位置是在数据网格中，但是如果我删除该数据网格，则默认将其设置为“ POST”请求，并从FLASK后端获取400，因此不会填充该数据网格。

好像其他东西都按预期运行一样，某些东西正在覆盖/否决'method'属性。

Answer 1

经过大量研究，发现HTML表单仅支持GET和POST，不支持PUT和DELETE。推荐使用的结构化REST请求的方法时，这非常令人沮丧。 ew，至少不是我的代码错了。

更改表单“方法”无效，浏览器发出“ GET”请求

1 个答案: