带有一些输入作为 JSON 字符串的 html 表单

Question

我有一个需要两个参数 param1 和 param2 的 servlet。 param1 必须有一个“value”作为 JSON 字符串，而 param2“value”是一个普通输入。即

param1 = {"id":"userid","name":"username","status":"userstatus"}

param2 = 添加

我的问题是如何使用以下 html 表单实现这一目标

    User ID: <input type="text" name="id"><br>

    User Name: <input type="text" name="name"><br>

    User Status: <input type="radio" name="status" value="active">Active
                 <input type="radio" name="status" value="inactive">Inactive<br>

    Action: <input type="radio" name="param2" value="add"> Add
            <input type="radio" name="param2" value="update"> Update 
            <input type="radio" name="param2" value="delete"> Delete 
            <input type="radio" name="param2" value="get"> Get<br>

    <button type="submit" >Submit</button>

Answer 1

你不能只用 html 来实现它，你还需要使用一些 javascript。

这里是示例代码。 （必须有json javascript库）

User ID:
<input type="text" name="id" id="userId">
<br> User Name:
<input type="text" name="name" id="username">
<br> User Status:
<input type="radio" name="status" value="active" id="statusActive">Active
<input type="radio" name="status" value="inactive" id="statusInactive">Inactive
<br> Action:
<input type="radio" name="param2" value="add" id="param2Add"> Add
<input type="radio" name="param2" value="update" id="param2Update"> Update
<input type="radio" name="param2" value="delete" id="param2Delete"> Delete
<input type="radio" name="param2" value="get" id="param2Get"> Get
<br>


<form action="MyServlet" onsubmit="return assignedBeforeSubmit();">
    <input id="param1" type="hidden" name="param1" value="" /> 
    <input id="param2" type="hidden" name="param2" value="" />
    <button type="submit">Submit</button>
</form>


<%-- this will not work without needful json lib --%>
<script src="json.js"></script>
<script src="json2.js"></script>

<script type="text/javascript">
    function assignedBeforeSubmit() {
        var param2Add = document.getElementById("param2Add").checked;
        var param2Update = document.getElementById("param2Update").checked;
        var param2Delete = document.getElementById("param2Delete").checked;
        var param2Get = document.getElementById("param2Get").checked;

        var param2 = (param2Add == true) ? document.getElementById('param2Add').value :  
            (param2Update == true) ? document.getElementById('param2Update').value :
                 (param2Delete == true) ? document.getElementById('param2Delete').value :
                     (param2Get == true) ? document.getElementById('param2Get').value : '';

        var statusActive = document.getElementById("statusActive").checked;
        var statusInactive = document.getElementById("statusInactive").checked;
        var status = (statusActive == true) ? document.getElementById('statusActive').value :  
            (statusInactive == true) ? document.getElementById('statusInactive').value : '';


        var jsonData = {
                "id" : document.getElementById('userId').value,
                "name" : document.getElementById('username').value,
                "status" : status
        };

        document.getElementById('param1').value = JSON.stringify(jsonData);
        document.getElementById('param2').value = status;
        console.log('status '+status);
        return true;
    };

</script>