Laravel API - Ionic Submitting Form

Question

Hopefully this question doesn't sound too amateurish! Just looking for some advice on how to get this. I really appreciate any help:

I have built an Ionic app and use Laravel as my API. I have no problems connecting these, and have made many requests. My question comes with how I can best submit large blocks of text to the API in a proper manner.

For example, I have a route such as this:

Route::post('/api/v1/task/add/{taskdescription}',function($taskdescription) {
  DB::insert('INSERT INTO tasks(task) VALUES (?)', [$taskdescription]);
});

Then in my Ionic controller, I have this:

$scope.saveNewTask = function() {
    $http.post(API_URL+'task/add/'+$scope.data.taskdescription)
        .success(function() {
            //Success Function
        })
        .error(function(err) {
            //Error Function
        });
};

This task description, however...I would like to be able to input html characters and % signs, and /, but whenever I add something such as the % or /, it does not work correctly as the $http.post URL then gets messed up. Does anyone know how I can "escape" or similar to be able to post complex and, potentially very long, pieces of data through an API call such as this?

Perhaps there is a better way to send this data that I am not aware of?

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

You can use a post body to send your data in Ionic:

$http.post(API_URL+'task/add', {taskDescription: $scope.data.taskdescription})
    .success(function() {
        //Success Function
    })
    .error(function(err) {
        //Error Function
    });

In Laravel you can use the Request object to access the data:

Route::post('/api/v1/task/add', function(Request $request)     {
    DB::table('tasks')->insert(array('task' => $request->input('taskDescription')));
});

Side note: it is good to read this answer about the differences between GET and POST requests and how values can be passed in both cases.

edited May 23 '17 at 12:16

Community

1
1

answered Dec 28 '16 at 20:06

piscator

5,521
3
19
29

Ok...that looks like it could work. I will give it a try now to see, and will let you know. – Ridge Robinson Dec 28 '16 at 20:08
So I have used your code in both my Ionic setup and my Laravel API. I can make a submission without receiving an error, but there is no actual post into my DB. I have made a console.log in my success function of the $scope.data.taskdescription and it is completely fine. Do you have any idea what else may be the issue? – Ridge Robinson Dec 28 '16 at 20:25
the first time I tried, I did get an error about content-type...so I added this into my Laravel API: header('Access-Control-Allow-Headers: Authorization, Content-Type'); and I didn't get the error again – Ridge Robinson Dec 28 '16 at 20:25
I'm sorry, you have to use $request->input('taskDescription') or $data = $request->all(); $data['taskDescription']; – piscator Dec 28 '16 at 20:35
Hmmm...I am still unable to get it to add anything. I have not received any errors either, it's just not doing anything. I also tried to split the http request into two based on this: http://stackoverflow.com/a/29272987/4470939 but this did not make a difference either. The console.log in the success function is still showing the correct task description. Any other ideas? – Ridge Robinson Dec 28 '16 at 20:41
Did you log the value you get in your Laravel API? Splitting the request can do no harm as long as the Content-Type is application/json. Setting the content type is not necessary though, since angular / Ionic will manage this. Try this syntax for the insert: https://laravel.com/docs/4.2/queries#inserts – piscator Dec 28 '16 at 20:48
I tried like this... Route::post('/api/v1/tasks/new/add', function(Request $request) { DB::table('tasks')->insert( array('task' => $request->input('taskDescription')) ); }); and it didn't help either :( – Ridge Robinson Dec 28 '16 at 20:54
I am still able to get my original code to work...so I know the connection and everything is working. But can't get the data with the body setup we are trying. Thanks for your continued help. – Ridge Robinson Dec 28 '16 at 20:59
The insert statement in your question (and my initial answer, since I copied it too fast) is wrong. I've updated my answer with the correct statement. You have to use the body setup when making a POST request, a url query for a post request is incorrect. Good luck! – piscator Dec 28 '16 at 21:04
Unfortunately, it still doesn't work. I will have to keep trying other things I guess. Thanks for trying. – Ridge Robinson Dec 28 '16 at 21:12

Laravel API - Ionic Submitting Form

1 Answers1