Question

我目前正在尝试使用jQuery向WebApi执行Ajax请求。我使用EntityFramework设置了一个数据库。我的问题是Ajax请求没有发送（不会出现在Fiddler中），我无法解决原因。我是网络Api的新手，但不是使用C＃的Aps.net。我没有检查WebApi是否有效。

我的HTML表单：

<form>
    <fieldset>
        <legend>Neue Person eintragen</legend>
        <br/>
        <label for="inpVorname">
            <input type="text" placeholder="Vorname" id="inpVorname"/>
        </label>
        <br/>
        <label for="inpNachname">
            <input type="text" placeholder="Nachname" id="inpNachname" />
        </label>
        <br/>
        <label for="inpAlter">
            <input type="number" min="14" max="110" step="1" value="40" />
        </label>
        <br/>
        <label for="butOne">
            <button id="butOne">Speichern!</button>
        </label>
    </fieldset>
</form>

JavaScript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // click on button
        $('#butOne').click(function () {

            // get Values from input fields
            var fnameInp = $('#inpVorname').val();
            var lnameInp = $('#inpNachname').val();
            var ageInp = $('#inpAlter').val();

            //build Json
            var personJson = {
                Firstname: fnameInp,
                Lastname: lnameInp,
                age : ageInp
            }
            // send request
            $.ajax({
                dataType: 'json',
                type: 'POST',
                url: 'api/GetData/newEntry',
                data: JSON.stringify(personJson),
                contentType: 'application/json; charset=utf-8',
                succes: function (data) {
                    console.log(data);
                },
                error: function () {
                    console.log("error again!");
                }

            });
        });
    });

</script>

数据控制器：

public class GetDataController : ApiController
{
    public string newEntry([FromBody] Person persobj)
    {
        // store result of SaveChanges- function ( number of saved entrys ) 
        int result;

        // Open context
        using ( var db = new PersonsDbModel())
        {
            // create new Object 
            var newpers = new Person();

            newpers.Firstname = persobj.Firstname;
            newpers.Lastname = persobj.Lastname;
            newpers.age = persobj.age;

            db.Persons.Add(newpers);
            result = db.SaveChanges();
        }

        if (result == 1) return "worked just fine!";
        else return "didn't save anything...";

    }
}

和webApi配置：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

Answer 1

你拼错了“成功”。在你的代码中你拼写它“成功”，（我做了完全相同的事情......）试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // click on button
    $('#butOne').click(function() {

      // get Values from input fields
      var fnameInp = $('#inpVorname').val();
      var lnameInp = $('#inpNachname').val();
      var ageInp = $('#inpAlter').val();

      //build Json
      var personJson = {
          Firstname: fnameInp,
          Lastname: lnameInp,
          age: ageInp
        }
        // send request
      $.ajax({
        dataType: 'json',
        type: 'POST',
        url: 'api/GetData/newEntry',
        data: JSON.stringify(personJson),
        contentType: 'application/json; charset=utf-8',
        success: function(data) { //change spelling here
          console.log(data);
        },
        error: function() {
          console.log("error again!");
        }

      });
    });
  });
</script>

Answer 2

虽然存在拼写错误且＆＃34; id＆＃34;在这种代码状态中缺少数字输入字段，代码基本上有效。这是（我的）Firefox浏览器的一个问题。如果我在Firefox中测试项目，则不会发送请求，而在其他浏览器（Chrome，Opera，IE，Edge）中它可以正常工作。

通过jQuery向WebApi发布ajax请求

2 个答案: