Question

我目前已经设置了下面列出的基本表单页面。如何使用AJAX重定向到新页面。我想要做的是预先设置的用户名作为选项，用相关信息指向页面A.但是，如果用户决定添加新的用户名，我希望它进行AJAX调用以返回包含其信息的相关JSON对象，并加载页面A及其信息。

<form action="/login" id="loginForm" method="post" required>
    <p>Select the test user or add a new one: 
        <select id="selectUser" name="username" required>
            <option value = "">-- Select an Option --</option>
            <option value = "#>1</option>
            <option value = "2">Add new</option>
        </select>
    </p>
    <div class="newUser">
        <p>Please Specify: 
            <label id="userNameLabel">
                <input name="New Username" type="text" placeholder="New Username" size="30" required/>
            </label>
        </p>
    </div>
    <div id="submitHolder">
        <input type="button" value="Submit" id="submitButton">
        <input type="hidden"  id="hiddenInput">
    </div>

使用以下Javascript：

$(document).ready(function(){

    $("p select[name=username]").change(function(e){
        if ($("p select[name=username]").val() == "2"){
            $(".newAccountInfo").show();
        } else{
            $(".newAccountInfo").hide();
        }
    });

    $(function(){
        $('#selectUser').on('change', function () {
            var url = $(this).val(); 
            $("#submitButton").on("click", function(){
            window.location = url;
            });
        });
    });

我仍然是AJAX的新手，所以我不确定如何做这种假冒＆＃34;登录＆＃34;。

Answer 1

应该是

<form action="/login" id="loginForm" method="post" required>
  <p>Select the test user or add a new one:
    <select id="userName" name="userName" required>
      <option value="">-- Select an Option --</option>
      <option value="first user">First user</option>
      <option value="Second user">Second User</option>
      <option value="newUser">Add new</option>
    </select>
  </p>
  <div class="newUserWrapper" style="display: none;">
    <div class="newUserContainer">
      <p>Please Specify:
        <label id="userNameLabel">
          <input name="userName" type="text" placeholder="New Username" size="30" required/>
        </label>
      </p>
    </div>
  </div>
  <div id="submitHolder">
    <input type="submit" value="Submit" id="submitButton">
    <input type="hidden" id="hiddenInput">
  </div>
</form>

和

$(document).ready(function() {
  var $newUserInputContainer = $('.newUserContainer');
  // Remove it from the DOM at the first time
  $newUserInputContainer.remove();
  $('#userName').on('change', function() {
    if ($(this).val() == 'newUser') {
      $('.newUserWrapper').show();
      $('.newUserWrapper').html($newUserInputContainer)
    } else {
      $('.newUserWrapper').hide().empty();
    }
  })

  $('form').on('submit', function(e) {
    e.preventDefault();
    var form = $("form").serialize();
    submitUserName(form);
  });
});

function submitUserName(data) {
  $.ajax({
    url: 'path/to/your/service',
    data: data,
    dataType: 'json',
    success: function(response) {
      /**
       * Your request is responded
       * You do not need to redirect
       * Just show the information in the same page
       * 
       **/

    },
    error: function() {
      // Show some error messages
    }
  });
}

注意：从DOM中插入和删除是为了确保从选择框中选择的值是肯定的。当用户选择new user时，会显示具有相同name的新字段，并在新textbox中输入用户。并且在提交时，两个字段都被提交，但是后者具有更高的优先级。服务器应用程序将采用后者。

关联示例应用：http://codepen.io/anon/pen/GpKmqg

通过jQuery / AJAX选择后重定向

1 个答案: