Question

经验水平=初学者。我正在尝试制作一个使用API在页面上加载数据的Web应用程序。用户最初选择一个州，然后在API调用中使用该州来检索该州的所有湖泊。湖泊数据填充在各个引导卡中，其中包含一些湖泊数据。当用户单击引导卡时，我想要获取先前由初始API调用返回的湖泊对象ID，然后在另一个API调用中使用该对象ID来获取湖泊上的详细信息。花了太多时间试图找出方法。我想我需要在结果页面上使用onclick this.form某些东西...。谢谢！

用户选择状态的初始搜索：

<% include ./partials/header %>
<div class="row">
        <div style="width: 50%; margin: 25px auto">
        <form action="/results" method="GET">
        <div class="form-group">
            <label for="selectState">Choose a State to View Lakes</label>
            <select name="state" size="8" class="form-control" id="selectState">
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="DC">District of Columbia</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MI">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>

            </select>    
        </div>
        <input type="submit" value="Submit">
    </form>
    </div>
</div>

提交会将用户带到结果页面：

<% include ./partials/header %>

 <div class="container">
     <header class="jumbotron">
         <div class="container text-center">
             <h1>Select a Lake to View Additional Information and Do Something with Notifications and Alerts</h1>
             <p>
                <a class="btn btn-primary btn-large" href="/search">Back To Search</a>
             </p>
         </div>
     </header>
        <div class="album py-3 bg-light">
            <div class="container">

              <div class="row">
                   <% data["features"].forEach(function(lake){ %>

                <div class="col-md-4 card-group">
                  <div class="card mb-4 shadow-sm">
                     <div class="card-body d-flex flex-column">
                      <form action="/results/details" method="GET">
                        <div class="form-group">
                      <p class="card-text">Lake ID - <%= lake["attributes"]["lakeid"] %></p>
                      <p class="card-text">Location - <%= lake["attributes"]["location"] %></p>
                      <p class="card-text hide">State - <%= lake["attributes"]["state"] %></p>
                      <p class="card-text">Latitude - <%= lake["attributes"]["latitude"] %></p>
                      <p class="card-text">Longitude - <%= lake["attributes"]["longitude"] %></p>
                      <p class="card-text">Object ID - <%= lake["attributes"]["objectid"] %></p>
                      <div class="d-flex justify-content-between align-items-end mt-auto">

                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <% }) %>
            </div>
        </div>
        </div>
  </div> 
<% include ./partials/footer %>

Answer 1

因此，我必须添加一个具有objectid值的form元素，以便在我提交表单时将其传递到新路线。它可以工作，但可能不是最准确的方法。还在学习....

将引导卡对象传递到新网页

1 个答案: