javascript - GET请求没有完整的信息

Question

我有一个 html 表单，如下所示。

<form>
My Name:<input type="text" name = "myName">
<select name="myCountry">
  <option>India</option>
  <option>Russia</option>
  <option>United States of America</option>
</select>
<input type="submit" name="Save">
</form>

假设我输入我的名字 Ashok ，选择“美利坚合众国”并按下提交按钮。我在搜索栏中看到的是:

myWeb.com/myPage/?myName=Ashok&myCountry=United&Save=Submit

GET 请求中只有'United'，但实际上它必须看起来像这样

myWeb.com/myPage/?myName=Ashok&myCountry=United+States+of+America&Save=Submit  

更新的详细信息

HTML 模板

{% extends "base.html" %}
{% block content %}
{% load static %}
<div id="content">
<form >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <!-- Sidebar Holder -->
    <div>
   </i><strong>Enter Persona Name</strong>: &nbsp <input type="text" name="person_name" , required="">
    <br><br><br>
    </i>Select your Key: &nbsp <select class="keyDropDown" name="key_name">
        <option disabled selected value> -- Select a Key -- </option>
        <option value="name">Name</option>
        <option value="ip">ip</option>
        <option value="country">Country</option>
        <option value="city">City</option>
        <option value="region">Region</option>
        <option value="device_type">Device Type</option>
        <option value="device">Device</option>
        <option value="visits">Visits</option>
        <option value="page">Pages Visited</option>
        <option value="items">Items Searched</option>
        <option value="user_id">User Id</option>
        <option value="browser">Browser</option>
    </select>
    <br><br>
</i>Enter your desired label for above selected key: &nbsp <input type="text" name="key_label">
    <br>
    <br>
    </i> Select value for your Key: &nbsp <select class="valueOfKey" name="key_value">
    </select>
    <br>
    <br>
     <input type="submit" name="Save">
</div>
</form>
<script type="text/javascript">

    $(document).on("change", ".keyDropDown", function() {

    $.ajax({
        url: "value_choices",
        type: "GET",
        data: {key: $(".keyDropDown").val()}, // $(this) is the first dropdown element, we need it's value
        dataType: "json",
        success: function(response) {
            if (response.data) {
                var secondDropdown = $(".valueOfKey"); // select 2nd dropdown
                secondDropdown.empty();                // empty dropdown
                secondDropdown.append(
                        "<option " + "disabled selected value" + ">" +"Select corressponding value for key" + "</option>");
                for (var item of response.data) {      // loop response & create options
                        console.log(item)
            secondDropdown.append(
                        "<option value=" + item +">" + item + "</option>"

                    );
                }
            }
        },

            error: function (jqXHR, exception) {
                                var msg = '';
                                if (jqXHR.status === 0) {
                                    msg = 'Not connect.\n Verify Network.';
                                } else if (jqXHR.status == 404) {
                                    msg = 'Requested page not found. [404]';
                                } else if (jqXHR.status == 500) {
                                    msg = 'Internal Server Error [500].';
                                } else if (exception === 'parsererror') {
                                    msg = 'Requested JSON parse failed.';
                                } else if (exception === 'timeout') {
                                    msg = 'Time out error.';
                                } else if (exception === 'abort') {
                                    msg = 'Ajax request aborted.';
                                } else {
                                    msg = 'Uncaught Error.\n' + jqXHR.responseText;
                                }
                                $('#post').html(msg);
                                               },
                                       });
                                   });

</script>
</div>
</div>
{% endblock %}

这是我的 django View

Django View

class ValueChoicesView(View):
    def get(self, request, *args, **kwargs):
        key = request.GET.get('key')
        if key is None:
            return HttpResponse(json.dumps({
                "error": "Field 'key' is required."
            }), content_type='application/json')
        # another validation would be if the key belongs in `ModelA`

        if key == 'page':
            data = []
            key_qs = Page.objects.all().values(key)


            for item in key_qs:
                if item[key] not in data:
                    data.append(item[key])

            return HttpResponse(json.dumps({"data": data}), content_type="application/json")

        else:

            data = []
            key_qs = VisitorInfo.objects.all().values(key)

            for item in key_qs:
                if item[key] not in data:
                    data.append(item[key])
            return HttpResponse(json.dumps({"data": data}), content_type="application/json")

def TestPageView(request):
    x=PersonSave(request)
    person_name = x[0]
    person_key = x[1]
    person_key_label=x[2]
    person_key_value=x[3]
    person_submit=x[4]
    if(x[4]=='Submit'):
        testPerson = TestPersona(name=person_name,key=person_key,label=person_key_label,value=person_key_value)
        testPerson.save()
    return render(request,'dashboard/test_page.html')

def PersonSave(request):
    person_name = request.GET.get('person_name',)
    person_key = request.GET.get('key_name',)
    person_key_value = request.GET.get('key_value',)
    person_key_label = request.GET.get('key_label',)
    person_submit = request.GET.get('Save',)
    #print(str(person_name) + " " + str(person_key)+ " " + str(persona_key_label) + " " + str(persona_key_value))
    return(str(person_name) ,str(person_key) ,str(person_key_label), str(person_key_value),str(person_submit))

提交表单前的截图(虽然已经填写了详细信息)

我按下提交按钮后的屏幕截图。

在这张图片中，您可以在地址栏中看到 key_value=United，但它必须是 key_value=United+States。

Answer 1

这对我有用:

<form action="" method="get">
    My Name:<input type="text" name="myName">
    <select name="myCountry">
        <option value="India">India</option>
        <option value="Russia">Russia</option>
        <option value="United States of America">United States of America</option>
    </select>
    <input type="submit" value="Save">
</form>

我在选项中添加了值，在“form”标签中添加了“method”属性，并在您的提交输入中将“name”属性更改为“value”。

这对你有用吗？