javascript - 如何从表单接收信息并使用 jQuery 和 AJAX 提交

问题描述

我目前被困在如何从表单中检索信息并使用 jQuery 提交它

我认为 usingserialize()会起作用，但它不会将信息放在我需要的地方。这是提交到特定开口的 API 结构以及API 链接

let form = $(this);
form.serialize()

它没有，但它的格式不正确。

这是我需要用户提供的 HTML 结构和信息：

<div class="container">
    <div class="form-container">

        <div class="header">
            <h1>Application form</h1>
        </div>
        <form action="#" class="applicantForm">

            <div class="form-group">
                <div class="input-group">
                    <label for="fname">First Name <span>*</span></label>
                    <input type="text" name="candidate_first_name">
                </div>
                <div class="input-group">
                    <label for="lname">Last Name <span>*</span></label>
                    <input type="text" name="candidate_last_name">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <label for="address">Email <span>*</span></label>
                    <input type="text" name="candidate_email">
                </div>
                <div class="input-group">
                    <label for="postcode">Phone <span>*</span></label>
                    <input type="text" name="candidate_phone">
                </div>

            </div>

            <div class="form-group">
                <div class="input-group">
                    <label for="city">Resume <span>*</span></label>
                    <input class="form-control" type="file" name="resume">
                </div>

                <div class="input-group">
                    <label for="country">Prompt Question <span>*</span></label>
                    <input type="text">
                </div>

                <div class="input-group">
                    <label for="">Website Link <span>*</span></label>
                    <input type="text">
                </div>
            </div>

            <button class="submit" type="submit">Apply Now</button>

        </form>
    </div>
</div>

这是我使用 jQuery 和 Ajax 提交表单的方式：

$(document).ready(function() {

  const ApplyOpeningPayloadBuilder = function() {
    let payload = {
      "fields": []
    };

    return {
      withKeyValue: function(key, value) {
        let param = {};
        param.key = key;
        param.value = value;
        payload.fields.push(param);
        return this;
      },
      withFile: function(key, encoded_data, filename) {
        let value = {};
        value.encoded_data = encoded_data;
        value.file_name = filename;
        this.withKeyValue(key, value);
        return this;
      },
      build: function() {
        return payload;
      }
    }
  }
  let encoded_file = "aGVsbG8gd29ybGQ";
  let apply_for_an_opening_payload_builder = new ApplyOpeningPayloadBuilder();
  apply_for_an_opening_payload_builder.withKeyValue("candidate_first_name", "John");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_last_name", "Doe");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_phone", "1345454333");
  apply_for_an_opening_payload_builder.withKeyValue("candidate_email", "john@doe.com");
  apply_for_an_opening_payload_builder.withFile("resume", encoded_file, "resume.txt");
  let payload = apply_for_an_opening_payload_builder.build();

  $.ajax({
    url: 'https://jsapi.recruiterbox.com/v1/openings/367603/apply?client_name=demoaccount',
    data: JSON.stringify(payload),
    dataType: 'json',
    type: 'POST',
    success: function(response) {
      $("#json-response").html(JSON.stringify(payload));
    }
  });
});

标签： javascriptjqueryajax

javascript - 如何从表单接收信息并使用 jQuery 和 AJAX 提交

问题描述

解决方案

推荐阅读